CODEWITHSUNDEEP
angularjsd3.jspie-chartnvd3.js
Channa
Channa

Reputation: 3737

Pie chart data not get updated over REST call

I'm using d3 pie chart in my angular app as follows,

                      <nvd3-pie-chart
                                data="collectedData"
                                id="piechart1"
                                width="380"
                                height="420"
                                x="xFunction()"
                                y="yFunction()"
                                tooltips="true"
                                donut="true"
                                donutRatio=".015"
                                color="colorFunctionPie()">
                            <svg height="230"></svg>
                        </nvd3-pie-chart>

values for "collectedData" is added as follows,

scope.collectedData=[{key:"one",y:10}];
scope.collectedData.push({key:"two",y:10});

this works fine, but when I use REST call in between those two values to fetch more values as follows,

for(var i=0;i<tenantNames.length;i++){
            resourceFactory.noOfClientsResource.get({reportDate:'2014-07-08',reportName:'Number of Clients',tenantIdentifier:tenantNames[i]},function (data) {
                scope.collectedData.push({key:data.tenantIdentifier,y:data.dataPointValues[0].dataPointValues[0]});

            });
            }

Pie chart only displays previous two values("one" and "two"), But Console.log(scope.collectedData); will print all four values including values from REST call. How can I update pie chart data including values from REST call?

Upvotes: 1

Views: 716

Answers (2)

Gaurav
Gaurav

Reputation: 106

Another approach is that you can get the data before the template loads using angular routeProvider parameter resolve.

Get the initial data 

resolve: {
    initialData: function(newsControllerInitialData){
        return data;
    }
}

Feed the initial data to the graph

app.controller("appController", function ($scope, initialData) {
    $scope.collectedData = initialData;
});

By this approach you will not have to redraw the graph multiple times. And resoling the data is besst approach as we get the data before template loads.

Upvotes: 0

user1364910
user1364910

Reputation:

Like @Chann said, add scope.$apply after your scope.collectedData.push line.

Or, wrap said line in scope.$apply, like so: 

scope.$apply(function () {
  scope.collectedData.push({key:data.tenantIdentifier,y:data.dataPointValues[0].dataPointValues[ 0]});
});

Upvotes: 1

Related Questions