CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
michael g
michael g

Reputation: 103

Error when generating line Chart, Uncaught TypeError: Cannot read property 'each' of undefined

Here is the problem reproduced. You can see the error when running it and opening the console. http://plnkr.co/edit/WC5TLIMENHtLcPF7T8uK?p=preview

I get a

Uncaught TypeError: Cannot read property 'each' of undefined

Within nvd3.js on the function defined in line 6125. Link the the source. Few lines of the function below:

function chart(selection) {
    renderWatch.reset();
    renderWatch.models(lines);
    if (showXAxis) renderWatch.models(xAxis);
    if (showYAxis) renderWatch.models(yAxis);
    console.log(selection);
    selection.each(function(data) {
    ...

Which looks to be defining the structure of the chart. However I am still a beginner with this library so I would very much appreciate your help in how to solve this one!

Upvotes: 1

Views: 478

Answers (1)

Mark
Mark

Reputation: 108537

Two issues:

1.) Your data is in the wrong format, it should be an array of objects, not just a single object:

var data = [{
  "key": "test",
  "values": [{
    "val": 56.00,
    "timestamp": "2015-11-08T18:10:36"
  }, {
    "val": 88.45,
    "timestamp": "2015-11-08T18:11:36"
  }, {
    "val": 120.71,
    "timestamp": "2015-11-08T18:12:36"
  }, {
    "val": 30.04,
    "timestamp": "2015-11-08T18:13:36"
  }, {
    "val": 55.11,
    "timestamp": "2015-11-08T18:14:36"
  }, {
    "val": 88.31,
    "timestamp": "2015-11-08T18:15:36"
  }, {
    "val": 90.09,
    "timestamp": "2015-11-08T18:16:36"
  }]
}];

2.) The nv.addGraph takes a function as an argument but you are calling the function. Should be:

nv.addGraph(generateLineChart);

Update plunker here.

Upvotes: 3

Related Questions