CODEWITHSUNDEEP
javascriptangularjsangular-nvd3
Gautam R
Gautam R

Reputation: 15

angular.js:10126 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error with nvd3 js

I am trying to plot a line-graph using nvd3(http://krispo.github.io/angular-nvd3/#/). The graph is inside an ng-repeat.

HTML Code:

Here i am passing an obj to from the array to the nvd3 graph, which is able to plot the line-graph. I have tried passing the orderItem.forecast directly to nvd3 instead of calling the function.

<div class="parent_div" ng-repeat="orderItem in array">
 <div class="col-md-4 overflow-graph">
  <nvd3 options="options" data="plotGraph(orderItem)" class="with-3d-shadow with-transitions" ng-cloak></nvd3>
 </div>
</div>

Controller Code :

The values against which i need to plot the graph are stored in orderItem.forecast. In plotGraph() I am returning the the current orderItem.forecast from which the graph is plotted.

$scope.options = {
    chart: {
        type: 'lineChart',
        height: 250,
        margin: {
            top: 20,
            right: 20,
            bottom: 40,
            left: 55
        },
        x: function(d) {
            return d.converted_date },
        y: function(d) {
            return d.cases_count },
        xAxis: {
            axisLabel: 'Date',
            tickFormat: function(d) {
                return d3.time.format('%m-%d-%y')(new Date(d));
            }
        },
        yAxis: {
            axisLabel: 'Quantity',
            tickFormat: function(d) {
                return d;
            },
            axisLabelDistance: -10,
        }
    }
};

/*Random Data Generator */
$scope.plotGraph = function(orderItem) {

    //Line chart data should be sent as an array of series objects.
    return [{
        values: orderItem.forecast, //values - represents the array of {x,y} data points
        key: orderItem.plu_code.commodity, //key  - the name of the series.
        color: '#ff7f0e', //color - optional: choose your own line color.
        strokeWidth: 2,
        classed: 'dashed'
    }];
};

Once the graph is plotted, i get an error, which freezing the browser on a couple of occassions, or the browser is slow to respond.

angular.js:10126 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Thanks.

Upvotes: 0

Views: 197

Answers (2)

Sujatha
Sujatha

Reputation: 302

Can you please check all values in your return (in plotgraph method) not null, i guess somewhere it is bringing null and the iteration stops.

Try one more fix, in ngrepeat try adding "orderItem in array track by id"

Upvotes: -1

Giovani Vercauteren
Giovani Vercauteren

Reputation: 1908

You're returning a new array every single time. Angular doesn't check the contents of an array to make sure it has changed or not.

Angular will check if something has changed and if something has changed a $digest will be triggered. In your case, because you're ALWAYS returning a new array, Angular will keep on triggering a new $digest and there's a fail safe that if the $digest cycle gets called 10 times in a row it will forcefully stop and throw that error.

In your case you want to create a function that creates the array you want and than have a separate function that retrieves the created array.

The problem function in your case is the plotGraph function

Upvotes: 0

Related Questions