CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
nilesh1212
nilesh1212

Reputation: 1655

D3 and Javascript: Uncaught TypeError: Cannot read property 'apply' of undefined

I am very new to D3 and JavaScript, I am trying to build up a basic donut chart, but stuck very badly with this error. I can see values coming into donutChartData, but still chart fails to get the display on the browser. Error occurred on line .call(donutChart);

Exception:

Uncaught TypeError: Cannot read property 'apply' of undefined
    at Array.Co.call (d3.min.js:3)
    at Socket.<anonymous> (main.js:137)
    at Socket.Emitter.emit (socket.io.js:7414)
    at Socket.onevent (socket.io.js:7130)
    at Socket.onpacket (socket.io.js:7088)
    at Manager.<anonymous> (socket.io.js:7520)
    at Manager.Emitter.emit (socket.io.js:7414)
    at Manager.ondecoded (socket.io.js:2823)
    at Decoder.<anonymous> (socket.io.js:7520)
    at Decoder.Emitter.emit (socket.io.js:2285)

Code:

var donutChart;
var donutChartData;

//Donut chart example
nv.addGraph(function() {
 donutChart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return +d.value })
      .showLabels(true)     //Display pie labels
      .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
      .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
      .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
      .donutRatio(0.35);  //Configure how big you want the donut hole size to be.     

   d3.select("#Chart4 svg")
        .datum(donutChartData)
        //.transition().duration(350)
        .call(donutChart); /// ERROR OCCURRED ON THIS LINE

  return donutChart;
});


socket.on("donutChartData",function(dChartData){
    donutChartData=dChartData; 
    console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value);
       d3.select("#Chart4 svg")
        .datum(dChartData)
        ///.transition().duration(350)
        .call(donutChart);
     //donutChart.update();
});

Upvotes: 0

Views: 2044

Answers (1)

Prajwal Bati
Prajwal Bati

Reputation: 195

Your code should be like this:

var donutChart;
var donutChartData;
function drawChart() {
//Donut chart example
nv.addGraph(function() {
donutChart = nv.models.pieChart()
  .x(function(d) { return d.label })
  .y(function(d) { return +d.value })
  .showLabels(true)     //Display pie labels
  .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
  .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
  .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
  .donutRatio(0.35);  //Configure how big you want the donut hole size to be.     

  d3.select("#Chart4 svg")
    .datum(donutChartData)
    //.transition().duration(350)
    .call(donutChart); /// ERROR OCCURRED ON THIS LINE

 return donutChart;
});
}


socket.on("donutChartData",function(dChartData){
    donutChartData=dChartData; 
    console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value);
    drawChart();
});

You must draw the chart after you get data for the chart which you are not doing right now.

Upvotes: 1

Related Questions