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
Post a Comment