d3.js - LinePlusBarChart with date interval outside domain -
i'm using angular-nvd3's lineplusbarchart display data, pretty this:
http://plnkr.co/edit/mrkvm1ihrvrn9jdbfwif?p=preview
in example above x-axis domain based on date values of data.
how can date interval of x-axis changed in lineplusbarchart start @ year 2000 , continue until year 2015, if there no data available between 2000 , 2004?
update: ordinary linechart, setting chart.xdomain = [mindate, maxdate]
works fine. chart showing data , chart x-axis starting on 2000 , ends on 2015. using chart.lines.xdomain = [mindate, maxdate]
, chart.bars.xdomain = [mindate, maxdate]
in lineplusbarchart data of chart showing, x-axis isn't reflecting changed min , max dates. here image showing error:
the chart options this:
chart: { type: 'lineplusbarchart', height: 300, margin: { top: 30, right: 75, bottom: 50, left: 75 }, bars: { forcey: [0] }, color: ['#2ca02c', 'darkred'], x: function(d,i) { return }, xaxis: { axislabel: 'x axis', tickformat: function(d) { var dx = $scope.data[0].values[d] && $scope.data[0].values[d].x || 0; if (dx > 0) { return d3.time.format('%x')(new date(dx)) } return null; } }, y1axis: { tickformat: function(d){ return d3.format(',f')(d); } }, y2axis: { tickformat: function(d) { return '$' + d3.format(',.2f')(d) } }, focusenable: false }
i found issue located in nvd3 library. xdomain
never honoured in nv.models.lineplusbarchart
function. had pull in xdomain
chart._options
adding following row:
xdomain: {get: function(){return xdomain;}, set: function(_){xdomain=_;}},
then added xdomain variable domain method bit further up:
x2 .domain(xdomain || d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
i had add xdomain
public variable @ beginning of function.
now x-axis tick labels changed along data.
Comments
Post a Comment