Search code examples
d3.jsnvd3.jsangular-nvd3

LinePlusBarChart with date interval outside domain

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

enter image description here

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:

enter image description here

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
        }
Solution

  • 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.