Implement multiple pie charts dynamically in angular js

[Scott]

Hi,

I was going through one of pie chart example at following url - http://demos.telerik.com/kendo-ui/pie-charts/remote-data-binding

How can i implement this in angular js.

•  Basically there is no docs around dynamically specifying k-data-source.

•   Also, in this example we have hard coded div elements for each year and then we are creating charts dynamically in each div. But what if i don't know how many years will be there is the data that will come from server(user can change year range) and then i have to draw pie charts for each.

[Scott]

Please look into this request and provide some help.

[Alex Hajigeorgieva]

Hi Scott,

To change the Kendo UI Data Source dynamically, you can create a function which accepts a year parameter and returns the Kendo UI Pie Chart options object with a filtered(by the year) Kendo UI Data Source. Then pass it to k-options="getPieOptions(year)".

You can create the DOM elements necessary for the Kendo UI Chart using the AngularJS ng-repeat directive. To obtain the length of the ng-repeat loop, you may need to group the Kendo UI Data Source by year and get its length:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-group

The demo is available at:

http://dojo.telerik.com/EjeNU

Regards,
Alex
Telerik by Progress