CODEWITHSUNDEEP
javascriptjsonangularjsnvd3.js
GeekOnGadgets
GeekOnGadgets

Reputation: 959

Pie Chart does not work with Json Data using AngularJS and nvd3

Problem,

I want to display the pie chart using the dynamic data from API but it does not work at all. Where as if i have a hard coded data it works perfectly fine.

I have created a Plunker 

 <nvd3-pie-chart
        data="exampleDataPieChart"
        id="toolTipExample2"
        x="xFunction()"
        y="yFunction()"
        width="150"
        tooltips="true">
    </nvd3-pie-chart>

http://plnkr.co/edit/Ve9X22X7RAuRGpA74tiB?p=preview

I am using github API and want to draw the pie chart for the languages used in the user repository

Please have a look and let me know where i am doing wrong

Thanks

Upvotes: 0

Views: 1242

Answers (1)

Morgan Delaney
Morgan Delaney

Reputation: 2439

Plunkr

2 things: your JSON format doesn't match exampleDataPieChart, as well as AngularJS doesn't know when to run $scope.$apply() internally.

Fix #1: Match the formats

var exampleDataPieChart = [{"key":"One","y":5},{"key":"Two","y":2},{"key":"Seven","y":9}]

vs.

var collectedData = [{"key":["JavaScript","CSS"],"y":[142531,205009]}]

Fix #2: Let AngularJS know you've updated data by creating a local var data then once its' ready, trigger $scope.$apply() by running $scope.collectedData = data.

Upvotes: 1

Related Questions