Dynamic number of series in chart

2 posts, 0 answers
  1. Rui
    Rui  avatar
    1 posts
    Member since:
    Apr 2016

    Posted 17 Jul 2017 Link to this post

    I have the following data structures in my app:

    public class MetricValue
        public DateTime TimeStamp { get; set; }
        public double Average

    public class CustomMetrics
        public string ResourceName { get; set; }
        public List<MetricValue> Metrics { get; set; }

    This is the Action that returns the data for the chart in the razor view:
    public async Task<IActionResult> GetAllDatabasesDTUPercentages()
        List<CustomMetrics> data = ...

        return Json(data);


    I have been reading through the demos and documentation and samples on Github but I have no idea how to configure the chart in the razor view. Most examples have the data come through the page Model or an object with known properties as series.

    The ResourceName should be the series name and I should see a series for each CustomMetrics object in the JSON data.


    Any help would be appreciated.

  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    354 posts

    Posted 20 Jul 2017 Link to this post

    Hello Rui,

    I can think of two ways to bind the Kendo UI Chart with a Model which has the provided structure.

    1) Use the approach as outlined in this documentation article on dynamic series in MVC:


    This approach will require a custom data source configuration so you can flatten the series data. Use schema parse to transform it:


    2) Keep the data in the same format and pass a Series.Field() property


    Here is a runnable demo with JavaScript which uses the second approach:


    The recommended approach is the first one. I hope this helps to get you started.

    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top