Thursday, 15 January 2015

angularjs - nvd3, multibar with time series data, x-ticks are appearing separately for each check box item -



angularjs - nvd3, multibar with time series data, x-ticks are appearing separately for each check box item -

i trying utilize nvd3 multibar chart time series data. in x-axis, ticks appearing separately check box item. how can prepare create appear normal multibar chart dates on x-axis. please find plunker @ http://plnkr.co/edit/gx5ph5xi2jzfylobo8m4?p=preview.

the next alternative settings:

$scope.options = { chart : { type : 'multibarchart', height : 400, text : 'credit recovery', x : function(d) { homecoming d[0]; }, y : function(d) { homecoming d[1]; }, usevoronoi : false, clipedge : true, transitionduration : 1000, useinteractiveguideline : true, xscale : d3.time.scale(), // <-- explicitly set time scale xaxis : { ticks : d3.time.months, // <-- add together formatter ticks tickformat : function(d) { homecoming d3.time.format('%m-%y')(new date(d)) }, showmaxmin : false }, yaxis : { tickformat : function(d) { homecoming '$' + d3.format('.02f')(d ) } } } };

i think info object wrong, check plunker right info construction , x,y attributes in chart object. order function.

plunker fixed

$scope.data = [ { "values":[ {x:1359072000000, y:10,label:'c1.1'}, {x:1365116400000, y:30,label:'c1.2'}, {x:1357516800000, y:40,label:'c1.3'}, ], "bar":true, "key":"carrier1" }, { "values":[ {x:1359072000000, y:30,label:'c2.1'}, {x:1365116400000, y:10,label:'c2.2'}, {x:1357516800000, y:79,label:'c2.3'}, ], "bar":true, "key":"carrier2" } ];

angularjs nvd3.js

No comments:

Post a Comment