charts - NVD3 multichart: Error with Lines if x is a date -


i use nvd3 multichart. have 2 lines , 1 bar chart.

the problem if put x equal number works fine in case x needs date.

when put date bar chart show not lines.

here 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 error got in console:

error: invalid value <path> attribute transform="translate(nan,841)" error: invalid value <path> attribute transform="translate(nan,764.3481053004498)" error: invalid value <path> attribute transform="translate(nan,841)" error: invalid value <path> attribute transform="translate(nan,713.4880468001999)" error: invalid value <path> attribute transform="translate(nan,772.9453840335499)" error: invalid value <path> attribute transform="translate(nan,0)" uncaught typeerror: cannot read property 'x' of null 

does know how can make works data format? thanks

the line chart not discrete bar chart is. need use numbers x values.

the way using timestamp instead of date string, , on tickformat() function convert string (as you're doing).

so, fix example, should either convert x values timestamps or this, convert them chart 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, don't receiving date string, converting seconds on x property , converting date when being displayed. recommend using timestamp get-go.

please note date format not on standard format. javascript's date.parse() function work on dates should specify them in 'mm/dd/yyyy' format.


Comments