9

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"

max
  • 9,708
  • 15
  • 89
  • 144
rushilg
  • 176
  • 1
  • 1
  • 8
  • Can you update your question with the data that is been passed to the chart. – shabeer90 Jul 13 '13 at 00:57
  • 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}]}] – rushilg Jul 13 '13 at 01:21
  • I have no idea about ruby-on-rails but Is the data passed a JSON object? – shabeer90 Jul 13 '13 at 02:41
  • Did you investigate with your browser's javascript console/debugger ? (to see where the code fails, what exactly is being passed to nvd3) – Ehvince Jul 22 '13 at 12:03
  • 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)" – rushilg Jul 22 '13 at 15:59
  • 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. – jjmontes Oct 26 '13 at 03:31
  • 1
    I had the same error and got stuck for hours. Similar to @jjmontes 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. – linqu Jan 08 '14 at 11:29
  • 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. – Raggamuffin May 14 '16 at 17:59

3 Answers3

26

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 ;-(

linqu
  • 11,320
  • 8
  • 55
  • 67
  • 4
    One detail, this can be repro on a line chart containing two lines sharing a common (x,y) point. – mcabral Mar 26 '15 at 22:00
4

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.

jjmontes
  • 24,679
  • 4
  • 39
  • 51
-2

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

shabeer90
  • 5,161
  • 4
  • 47
  • 65
  • 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}]}]} – rushilg Jul 13 '13 at 12:17
  • In addition, the plot appears fine but the error comes when I mouseover for a tooltip – rushilg Jul 13 '13 at 12:18
  • As I mentioned, the data is in JSON format but I'm still getting the error - would appreciate any ideas! – rushilg Jul 18 '13 at 18:19
  • 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. – jtromans Aug 20 '13 at 09:06
  • 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. – shabeer90 Aug 20 '13 at 09:18
  • unable to see chart in the fiddle – Rosa Alejandra Sep 25 '17 at 20:52