LinePlusBarChart with date interval outside domain

Question

I'm using the angular-nvd3's LinePlusBarChart to display some data, pretty much like this:

http://plnkr.co/edit/mrkvM1ihrVRN9jdBFWiF?p=preview

In the example above the x-axis domain is based on date values of the data.

How can the date interval of the x-axis be changed in a linePlusBarChart to start at year 2000 and continue until year 2015, even if there is no data available between 2000 and 2004?

Update: For an ordinary lineChart, setting chart.xDomain = [minDate, maxDate] works fine. The chart is showing data properly and the chart x-axis is starting on 2000 and ends on 2015. By using chart.lines.xDomain = [minDate, maxDate] and chart.bars.xDomain = [minDate, maxDate] in a linePlusBarChart the data of the chart is also properly showing, but the x-axis isn't reflecting the changed min and max dates. Here is an image showing the error:

The chart options look like 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 i },
            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
        }

You should be able to something like `chart.xAxis.scale().domain([minDate, maxDate]);`. — Lars Kotthoff, Oct 31 '15 at 02:18
Lars, thanks for your input! I've made an update to the question. As you state, changing the scale might certainly be the problem. However I haven't been able to succesfully change the values of the x-axis. I've been looking at this chart, using the extended display to see all available options: https://krispo.github.io/angular-nvd3/#/linePlusBarWithFocusChart — John P, Oct 31 '15 at 07:57

score 1 · Accepted Answer · answered Oct 31 '15 at 16:14

I found the issue to be located in the nvd3 library. xDomain was never honoured in the nv.models.linePlusBarChart function. I had to pull in xDomain into chart._options by adding the following row:

xDomain: {get: function(){return xDomain;}, set: function(_){xDomain=_;}},

Then I added xDomain variable to the domain method a bit further up:

x2 .domain(xDomain || d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))

I also had to add xDomain as a public variable at the beginning of the function.

Now the x-axis tick labels are changed along with the data.

LinePlusBarChart with date interval outside domain

1 Answers1