in Education by
*Updated with more relevant code. *Updated again: removing chart groupings results in this error: "Unable to get property 'classed' of undefined or null reference dc.js (5575,9)". I am using dc 3.0.11. I have an issue where my dc charts are not filtering each other upon clicking a selection on a chart. It does work if I call a function to explicitly do so, but I would like to avoid that. This is my general approach: I do have dc.css included (if that matters) my crossfilter ndx and dimensions are correct I am defining my charts WITHOUT .on renderlet (is this the reason?) var masterData = []; $(document).ready(function () { //UPDATED CODE START var siteurl = 'site'; var ItemCount= GetItemCount(siteurl, 'list'); createRestUrl(siteurl,ItemCount,'list'); }); // UPDATED CODE END function GetItemCount(siteurl, ListName){ var ItemCount=''; $.ajax({ url: siteurl+"/_api/web/lists/GetByTitle('"+ListName+"')/ItemCount", method: "GET", async: false, headers: { "Accept": "application/json; odata=verbose" }, success: function (data) { ItemCount = data.d.ItemCount; }, error: function (data) { console.log(data); } }); return ItemCount; } // GetItemCount END function createRestUrl(siteurl, ItemCount, ListName) { var listServiceUrl = siteurl+ "/_api/web/lists/GetByTitle('" + ListName + "')/Items"; //Rest call to process each items of list $.when(processList(listServiceUrl,ItemCount)).done(function () { console.log("FINISHED"); console.log("--------"); console.log(masterData); var ndx = crossfilter(masterData), clientMgr = ndx.dimension(function(d) { return d.clientMgr}), otherTeammates = ndx.dimension(function(d) { return d.otherTeammates}), topic = ndx.dimension(function(d) { return d.topic}), status = ndx.dimension(function(d) { return d.status}), team = ndx.dimension(function(d) { return d.team}), requester = ndx.dimension(function(d) { return d.requester}), requesterBusiness = ndx.dimension(function(d) { return d.requesterBusiness}), submitted = ndx.dimension(function(d) { return d.submitted}), clientMgrGroup = clientMgr.group(), otherTeammatesGroup = otherTeammates.group(), topicGroup = topic.group(), statusGroup = status.group(), teamGroup = team.group(), requesterGroup = requester.group(), requesterBusinessGroup = requesterBusiness.group(), submittedGroup = submitted.group(); var teamChart = dc.rowChart("#team_chart", "team"); var clientMgrChart = dc.pieChart("#mgr_chart", "mgr"); var statusChart = dc.pieChart("#status_chart", "status"); var requesterChart = dc.rowChart("#requester_chart", "request"); var requesterBusinessChart = dc.pieChart("#requesterBusiness_chart", "requestBusiness"); var timeSelect = dc.lineChart("#time_chart", "time"); var topicChart = dc.pieChart("#topic_chart", "topic"); var teamNum = dc.numberDisplay("#teamNum", "teamNum"); Date.prototype.addDays = function(days) { var dat = new Date(this.valueOf()); dat.setDate(dat.getDate() + days); return dat; } var thisDay = new Date(); var todayMinSix = thisDay.addDays(-30); var todayPlusSix = thisDay.addDays(30); teamChart .dimension(team) .group(teamGroup) .width(800) .height(200) .transitionDuration(3000) .ordering(function(d) { return -d.value }) .elasticX(true) .x(d3.scaleLinear().domain([0, 100])) .colors('#58D3F7') //teamNum //.valueAccessor(function(d) { return d}) //.formatNumber(d3.format()) //.group(teamGroup) clientMgrChart .dimension(clientMgr) .group(clientMgrGroup) .width(300) .height(300) .transitionDuration(3000) statusChart .dimension(status) .group(statusGroup) .height(200) .width(500) .innerRadius(95) .transitionDuration(3000) .colors(d3.scaleOrdinal().domain(["02 - Work-In-Progress", "01 - Pending Initial Review"]) .range(['#58D3F7', '#2E9AFE'])) requesterChart .dimension(requester) .group(requesterGroup) .height(200) .width(800) .gap(10) .transitionDuration(3000) .ordering(function(d) { return -d.value }) .elasticX(true) .colors('#F78181') .x(d3.scaleLinear().domain([0, 100])); requesterBusinessChart .dimension(requesterBusiness) .group(requesterBusinessGroup) .height(300) .width(300) .innerRadius(117) .transitionDuration(3000) .colors('#F78181') topicChart .dimension(topic) .group(topicGroup) .height(200) .width(500) .innerRadius(95) .transitionDuration(3000) .colors(d3.scaleOrdinal().domain(["New Report / Interface", "General Support", "One-Time Data Set", "Recurring Data Set", "Modify Existing Report / Interface", "Production Issue"]) .range(['#F5A9A9', '#F78181', '#FA5858', '#F6CECE', '#F8E0E0', "#FBEFEF"])) timeSelect .width(1700) .height(150) .dimension(submitted) .group(submittedGroup) .transitionDuration(1000) .elasticY(true) .renderArea(true) .x(d3.scaleTime().domain([todayMinSix, thisDay])) .xUnits(d3.timeDays) .mouseZoomable(false) .xAxis(); teamChart.render(); statusChart.render(); requesterChart.render(); topicChart.render(); }); } //Step 3: Rest call to process each items of list function processList(nextUrl,ItemCount) { var dfd = new $.Deferred(); if (nextUrl == undefined) { dfd.resolve(); return; } getJSONDataFromUrl(nextUrl).done(function (listItems) { TotalItemCount = TotalItemCount+listItems.d.results.length; console.log("getJSON called"); var items = listItems.d.results; var next = listItems.d.__next; $.when(processList(next,ItemCount)).done(function (){ dfd.resolve(); }); $.each(items, function(index, obj){ items = {}; items.clientMgr = obj.ClientMgr; //Assigned To - might not be the right field items.otherTeammates = obj.OtherTeammatesEngaged; //Assigned To - might not be the right field items.topic = obj.Topic; items.status = obj.Status; items.team = obj.Team; items.requester = obj.RequesterLOB; items.submitted = obj.Submitted; items.requesterBusiness = obj.RequesterBusinessGroup; console.log("looping through each"); var convert = new Date(items.submitted); items.submittedConvert = moment(convert).format('L'); items.submitted = convert; var assignName = items.clientMgr; items.clientMgr = assignName; masterData.push(items); console.log(items.requesterBusiness); console.log(items.status); }); //.each END }); // getJSONDataFromUrl END return dfd.promise(); } // processList END I had this working long ago, but as the project became more complex, something broke along the way. JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
I'm going to guess that the error refers to the use of .classed() a few lines up from 5575. Here are the lines leading up to 5575: if (d3.sum(_chart.data(), _chart.cappedValueAccessor)) { pieData = pie(_chart.data()); _g.classed(_emptyCssClass, false); } else { // otherwise we'd be getting NaNs, so override // note: abuse others for its ignoring the value accessor pieData = pie([{key: _emptyTitle, value: 1, others: [_emptyTitle]}]); _g.classed(_emptyCssClass, true); } if (_g) { https://github.com/dc-js/dc.js/blob/3.0.11/dc.js#L5565-L5575 So (except for the line number being a little off) it's a good guess that _g is null. As I noted in my comment above, this probably indicates that the chart was redrawn before it was rendered. This can happen if you create a chart but don't render it. Rendering initializes things like the scale and parent elements like the that holds the chart. When you create a chart, you either specify a chart group or the default chart group is selected for you. The chart is registered in that group, and when any chart in the group is filtered, all the charts are redrawn. In your code above, you render specific charts (4 of them), but there are many more charts which you initialize but don't render (8). In particular, all of the pie charts are rendered except for clientMgrChart. When you later click on a chart, it's likely that chart crashes when it tries to redraw. It would be nice if dc.js implemented a more helpful error for this case since you currently have to guess "hmm, null, guess something hasn't been set up right" and know that render must happen before redraw. Note: it's more robust to initialize the charts and then call dc.renderAll(); instead of rendering each one manually.

Related questions

0 votes
    I'm trying to include actual date and time to the certain message, however I'm unable to do it, ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 2, 2022 in Education by JackTerrance
0 votes
    I am trying to create a simple node.js app on heroku. Here is app.js: console.log("Starting App" ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 4, 2022 in Education by JackTerrance
0 votes
    I'm trying to debug my nodejs app using node-inspector. But Google Chrome doesn't show the code. ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jul 11, 2022 in Education by JackTerrance
0 votes
    Quick Summary of my question: Does Gulp 3.6.0 dest() handle glob-base the same way as 4.0.0? ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 19, 2022 in Education by JackTerrance
0 votes
    I have this: On every second, all images move to the same random position But I want this: On ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I'm currently loading an STL onject into my three.js scene. For some reason, it takes a lot of ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    The napi_create_date function appeared in Node.js starting with 11.11.0 version. https://nodejs.org/api/n- ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 17, 2022 in Education by JackTerrance
0 votes
    I am trying to write some stuff in a file using reactJS and nodeJs but it doesnt work. Here is ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I am trying to write some stuff in a file using reactJS and nodeJs but it doesnt work. Here is ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 26, 2022 in Education by JackTerrance
0 votes
    app.route('/users') .post(user.post) .get(user.get) .get(user.everyone) .put(user.update) . ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 3, 2022 in Education by JackTerrance
0 votes
    Tell me how to make it so that when you click on a button from a cycle with page numbers, this ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I'm used to v3 node botbuilder sdk so I have a middleware where I look at the dialog stack and ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    My websocket application accepting connections like this: wsServer.on('request', function(request) { console.log( ... for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 8, 2022 in Education by JackTerrance
0 votes
    There are a lot of samples on running Async/Await functions. But only with one await call. I don' ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 11, 2022 in Education by JackTerrance
0 votes
    I have a PHP blade file and I have a list of components working as they but can't seem to pass ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
...