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 d

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);
        }
    }
}

};