This is a migrated thread and some comments may be shown as answers.

Dynamic number of series in chart

1 Answer 630 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Rui
Top achievements
Rank 1
Rui asked on 17 Jul 2017, 09:10 AM

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.

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 20 Jul 2017, 09:00 AM
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
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 (charts) and form elements.
Tags
Chart
Asked by
Rui
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or