Dynamic number of series in chart

[Rui]

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.

[Alex Hajigeorgieva]

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:

http://docs.telerik.com/aspnet-mvc/helpers/chart/how-to/create-dynamic-series#create-view-model-bound-dynamic-series

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

http://docs.telerik.com/aspnet-mvc/getting-started/custom-datasource

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

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.field

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

http://dojo.telerik.com/@bubblemaster/ecEFe 

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

Regards,
Alex Hajigeorgieva
Progress Telerik