Implement multiple pie charts dynamically in angular js

3 posts, 0 answers
  1. Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 30 Aug 2016 Link to this post


    I was going through one of pie chart example at following url -

    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.
  2. Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 01 Sep 2016 in reply to Scott Link to this post

    Please look into this request and provide some help.
  3. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    298 posts

    Posted 01 Sep 2016 Link to this post

    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:

    The demo is available at:

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top