NVD3 multichart: Error with Lines if x is a date

Question

I use nvd3 multichart. I have 2 lines and 1 bar chart.

The problem is if I put x equal number everything works fine but in my case x needs to be a date.

When I put the date the bar chart show well but not the lines.

Here is my code:

    var testdata = [{
        key: 'Stream',
        values: [{x: '2015-01-01', y: -0.14459575778442077}, {x: '2015-02-01', y: 1.14459575778442077}, {x: '2015-03-01', y: -0.14459575778442077}]
    },
    {
        key: 'Stream1',
        values: [{x: "2015-01-01", y: 2}, {x: "2015-02-01", y: 1}, {x: "2015-03-01", y: 14}]
    },
    {
        key: 'Stream2',
        values: [{x: "2015-01-01", y: 0.14459575778442077}, {x: "2015-02-01", y: 1.45}, {x: "2015-03-01", y: 0.14459575778442077}]
    }
];

testdata[0].type = "line";
testdata[0].yAxis = 1;
testdata[1].type = "line";
testdata[1].yAxis = 1;
testdata[2].type = "bar";
testdata[2].yAxis = 1;

nv.addGraph(function() {
    var chart = nv.models.multiChart()
        .margin({top: 30, right: 60, bottom: 50, left: 70})
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%m/%d/%y')(new Date(d))
      });
    chart.yAxis1.tickFormat(d3.format(',.1f'));


    d3.select('#chart1 svg')
        .datum(testdata)
        .transition().duration(500).call(chart);

    return chart;
});

Here is the error I got in the console:

Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,764.3481053004498)"
Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,713.4880468001999)"
Error: Invalid value for <path> attribute transform="translate(NaN,772.9453840335499)"
Error: Invalid value for <path> attribute transform="translate(NaN,0)"
Uncaught TypeError: Cannot read property 'x' of null

Does anyone know how I can make it works with my data format? Thanks

score 0 · Answer 1 · answered May 08 '15 at 17:50

The line chart is not discrete as the bar chart is. You need to use numbers as the x values.

The way I usually do this is by using a timestamp instead of the date string, and on the tickFormat() function I convert it to a string (as you're actually doing).

So, to fix your example, you should either convert all the x values to timestamps or do something like this, that will convert them as the chart is begin created:

var chart = nv.models.multiChart()
    .x(function(d) { return new Date(d.x).getTime() })
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .color(d3.scale.category10().range());

However, I don't like receiving the date as a string, converting it to seconds on the x property and then converting it back to date when being displayed. I recommend using a timestamp from the get-go.

Please note that your date format is not on a standard format. For the Javascript's Date.parse() function to work on your dates you should specify them in 'MM/DD/YYYY' format.

unfortunately i can't use timestamp because the data i have will be from a database with this format. any others solution i could use? — usertfwr, May 11 '15 at 02:08
It is the solution I don't like doing. You first convert d.x to time stamp in the .x() function and then in the tickFormat() function you convert it back to the representation you want to display. But you'll probably want to stick with timestamps in the x() function. — RenatoUtsch, May 11 '15 at 12:20

NVD3 multichart: Error with Lines if x is a date

1 Answers1