NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

Question

I'm using the NVD3 library to make simple line charts based on data generated in a Rails controller. The code I'm using to generate data in Rails is:

task.task_values.each do |u|
 array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i })
end
data_label = task.name + " ("+ task_unit +")"
taskValuesList = [{:key => data_label, :values => array}]
data = {:type => "line", :data => taskValuesList}

Then, in my view, I have the following JS code:

nv.addGraph(function() {
var chart = nv.models.lineChart()
  .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

chart.xAxis
   .showMaxMin(false)
       .tickFormat(function(d){return d3.time.format("%m/%d/%y")(new Date(d));});
chart.yAxis
   .tickFormat(d3.format(',d'));

d3.select('#chart<%= i %> svg')
  .datum(data.data)
  .transition().duration(500)
  .call(chart);

nv.utils.windowResize(chart.update);
  return chart;
});

The chart renders properly, but when I try to mouseover data points to show the tooltip, I get the error "Uncaught TypeError: Cannot read property 'x' of undefined"

Overstride

Can you update your question with the data that is been passed to the chart. – Quincentenary

Here's some sample data: [{:key=>"Blood Pressure Diastolic (mmHg)", :values=>[{:x=>1373403179000, :y=>91}, {:x=>1373403469000, :y=>95}, {:x=>1373403567000, :y=>61}, {:x=>1373404123000, :y=>56}, {:x=>1373404515000, :y=>56}, {:x=>1373404592000, :y=>56}, {:x=>1373404749000, :y=>56}, {:x=>1373405085000, :y=>56}]}] – Overstride

I have no idea about ruby-on-rails but Is the data passed a JSON object? – Quincentenary

Did you investigate with your browser's javascript console/debugger ? (to see where the code fails, what exactly is being passed to nvd3) – Cool

Through the Chrome JS console, I get the following error trace but not a specific line where the code is failing - "Uncaught TypeError: Cannot read property 'x' of undefined (anonymous function) showTooltip (anonymous function) event (anonymous function) event pointPaths.on.on.on.series (anonymous function)" – Overstride

I'm having the same issue, couldn't find a solution yet, but I've found that avoiding zeros in values sometime helps. Using .useInteractiveGuideline(true) on the chart works consistently for me. – Benildas

I had the same error and got stuck for hours. Similar to @Benildas I found out that avoiding only zeroes values (or equal values) helps. In fact, by adding some random noise on the data the chart worked fine. I guess it is a bug in nvd3. – Antibiosis

I had the same issue when using Date Objects as x values. Using unix timestamp instead solved the problem since the value has to be a number. – Attaint

Answer 1

I had the same error and got stuck for hours. After some investigation I found out that I was using the most recent version of d3.js which was not compatible to the most recent version of nvd3.js

Make sure that you are using the d3.js version that is included in the nvd3 repository: /lib/d3.v3.js

That was quite tricky to find out. In particular because the nvd3 documentation tells you to use the latest d3.js version ;-(

Antibiosis

One detail, this can be repro on a line chart containing two lines sharing a common (x,y) point. – Vacate

Answer 2

If you are seeing a Uncaught TypeError: Cannot read property 'x' of undefined it is possibly because your data series contain different numbers of points.

Check if this happens with only one series.

Benildas

I just ran into this problem for my Y axis as well... looking into making sure that everything matches up to avoid this error – Maricamarice

This is the cause. All bar groups must have the same number of elements. – Belga

Answer 3

Make sure your data is in JSON format,

Here is how the sample JSON data should look like

data = [{
    key : "Line 1",
    color : "#51A351",
    values : [{
        x : 1373403179000,
        y : 40
    }, {
        x : 1373403469000,
        y : 30
    }, {
        x : 1373403567000,
        y : 20
    }]
}, {
    key : "Line 2",
    color : "#BD362F",
    values : [{
        x : 1373403179000,
        y : 60
    }, {
        x : 1373403469000,
        y : 50
    }, {
        x : 1373403567000,
        y : 70
    }]
}]

UPDATE : Here is a working fiddle of a NVD3 Line chart

Quincentenary

Yes, I'm passing the data as a JSON object. An example of the parameters being received by the JS code is: {"type":"line","data":[{"key":"Blood Pressure Diastolic (mmHg)","values":[{"x":1373403179000,"y":91},{"x":1373403469000,"y":95},{"x":1373403567000,"y":61},{"x":1373404123000,"y":56},{"x":1373404515000,"y":56},{"x":1373404592000,"y":56},{"x":1373404749000,"y":56},{"x":1373405085000,"y":56}]}]} – Overstride

In addition, the plot appears fine but the error comes when I mouseover for a tooltip – Overstride

As I mentioned, the data is in JSON format but I'm still getting the error - would appreciate any ideas! – Overstride

Did you resolve this? I am having the same error when I try to click the series names in the legend to temp. hide them. – Bichromate

I have updated the answer with a link to a working version of the LineChart in a fiddle. Have a look and see where you have gone wrong in your code. – Quincentenary

unable to see chart in the fiddle – Adams