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 Link to this post

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

    Posted 01 Sep in reply to Scott Link to this post

    Please look into this request and provide some help.
  3. Kendo UI is VS 2017 Ready
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    115 posts

    Posted 01 Sep 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:

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top