nvd3 chart strange behavior with date range slider

Question

While displaying nvd3 chart with Ajax requests, the charts are getting wired up. So I thought the problem is occurring due to asynchronous call delays (may be the chart is displaying before the full data is loaded, etc). So I have used promises, but still I am getting the same problem. Please see the plunker http://plnkr.co/edit/AcIpmki7GNvcoT6Z38Pm?p=preview.

If you change the date range slider, the main chart won't display properly. I am not sure where the problem is? After searching some of the posts in forum, I have come across some thing like gaps in the time series, is it due to that? If that is the case, how can I fix that time series gap issue? I searched nvd3 website, but I don't find any documentation regarding to fill up the gaps in time series data. Some of the forum posts suggests to use c3.js instead nvd3, but I don't know is it really worth to shift to c3.js? Within my experience I feel nvd3 are the best and I don't feel like leaving nvd3.

If nvd3 website provides more samples with real time series data and documentation on some of the common issues like filling gaps in time series, sorting the data, etc it will be really helpful for the beginners.

As my project release dates are nearing, I am not sure what to do now ? Shifting to c3.js is the worst option for me. I have attached the error screen shot too from the same plunker.

I feel there is no problem with the sorting that I am doing with my json data:

  angular.forEach($scope.data, function(
                                        series, index) {
                                    series.values.sort(function(a, b) {
                                        return a.x - b.x;
                                    });
                                });

Answer 1

Couple of issues for you to look at:

1. I agree with shabeer90, the data is funky. You have multiple values occurring at the same time.

2. Your sort is correct, but where you have it in your code doesn't work...try adding it inside the response of the ajax call (right after setting $scope.data = data).

3. Also, you need to make the changes that I outlined in another question (to nvd3 in the lineWithFocusChart model).

4. Accessing the xScale is a little more tricky...on this chart you need to go through the lines:

$scope.options = {
    chart: {
    type: 'lineWithFocusChart',
    height: 450,
    margin : {
        top: 20,
        right: 20,
        bottom: 60,
        left: 40
    },
    transitionDuration: 500,
    lines : { // <-- add this
        xScale : d3.time.scale()
    },
    lines2 : { // <-- add this too
        xScale : d3.time.scale()
    },
    xAxis: {
        ticks : d3.time.months, <-- add the time interval
        axisLabel: 'X Axis',
        tickFormat: function(d){
            return  d3.time.format('%d/%m/%y')(new Date(d))
        }
    },
    x2Axis: {
        tickFormat: function(d){
            return  d3.time.format('%d/%m/%y')(new Date(d))
        }
    },
    yAxis: {
        axisLabel: 'Y Axis',
        tickFormat: function(d){
            return d3.format(',.2f')(d);
        },
        rotateYLabel: false
    },
     y2Axis: {
        tickFormat: function(d){
            return d3.format(',.2f')(d);
        }
    }
}

};