Displaying multiple charts with DataSource

[Aerion]

Is it possible to return a model which contains some lists and some integers, and process each as a series, using ASP.NET MVC? I'm wanting to display a scatter chart, line charts, etc.

[Aerion]

(I'm wanting do scatter points and a standard deviation line.)

[Alex Gyoshev]

Hello Anthony,

What is the model definition that you are trying to bind to? Assuming that both are fields of the Foo model, you can bind the chart like this:

    @model Kendo.Mvc.Examples.Models.Foo

    @(Html.Kendo().Chart()
        .Name("chart")
        .Series(series => {
            series.Scatter(Model.PricePerformance);
            series.Line(Model.StandardDeviation);
        }))

 

Regards,

Alex Gyoshev

Telerik

 

 

[Aerion]

Hi Alex,

I'd want to have a model passed from DataSource, and not as a Model passed to the view. It would contain:
- List<ValueViewModel> Values
- double Mean
- double StandardDeviation

The ValueViewModel would at least contain:
- int Value
- int Count

The values would be used to create a bell curve, with vertical standard deviation lines.

[Alex Gyoshev]

Hello Anthony,

If I understand correctly, only the list of values (Values) needs to be a series, and you can use the chart plot bands to show the mean / standard deviation as lines (as in this demo). If that is your intent, check out the ChartPlotBandsBuilder for a demo how to configure them.

Regards,
Alex Gyoshev
Telerik

 

 

[Aerion]

Hi Alex,

Do you have an example of how to show the list of values in that data structure in a chart such as a Column?

[Alex Gyoshev]

Hello Anthony,

If I understand correctly, this example should be what you are looking for -- Dojo snippet (using the Dojo to quickly illustrate the result, the fluent builder syntax is analogous).

Regards,
Alex Gyoshev
Telerik

 

 

[Aerion]

Hi Alex,

This example's model is very basic, unlike mine. Is there maybe a way to simplify mine so it works? I need to be able to pass many "ValueViewModel"s as well as other singular primitive types, via DataSource.

[Alex Gyoshev]

Hello Anthony,

It appears that we are not understanding the problem -- please provide a sample that shows the problematic model that matches your scenario, along with some sample data, so that we can reach a solution.

Regards,
Alex Gyoshev
Telerik

 

 

[Aerion]

I need to get a Model from DataSource called ValueChartViewModel. It contains:

- List<ValueChartViewModel> Values
- double Mean
- double StandardDeviation

The ValueChartViewModel would contain at least:
- int value

I am not sure how to show a Column chart (or any chart) from the List of ValueChartViewModels within the one ViewModel passed by DataSource, using MVC.

[Alex Gyoshev]

Hello Anthony,

Have you checked out the offline chart demos that ship with the Kendo UI distributions? How does your scenario differ from the local data binding demo? For example, what does the ValueChartViewModel contain? Your last message is the same as the one posted after my first response. Please provide an example, as requested, in order to proceed with this thread. I have changed it to a support ticket so that the project is not visible to the public.

Regards,
Alex Gyoshev
Telerik

 

 

[Aerion]

Hi Alex,

Sorry, I didn't realize you wanted a sample project of it. Here is one: 
https://drive.google.com/file/d/0B4WPGvXqtHMdb1FuVk5PaG5LazQ/view?usp=sharing

[Alex Gyoshev]

Hello Anthony,

You cannot bind directly to this type of object. However, you have these options to create such a chart:

• You can have the standard deviation via the built-in functionality, as shown in this demo. This will alleviate the need to serialize it from the server:
  
  

     @(Html.Kendo().Chart(Model.WinningPlayerNetValues)
            .Name("net-value-chart")
            .Series(series =>
            {
                series.Column(model => model).CategoryField("value")
                    .ErrorBars(errorBars => errorBars.Value("stderr"));
            }))

• You can add the mean/standard deviation values to the NetValuesViewModel and then bind the Chart to an IEnumerable of NetValuesViewModel. This will serialize the mean/value in every data item, and the line chart can be bound to them. I'm attaching the adjusted project to illustrate the idea.

Regards,
Alex Gyoshev
Telerik

 

 

[Aerion]

Hi Alex,

By "You cannot bind directly to this type of object" do you mean you can't use DataSource (Ajax) but you can pass it directly to the page? This is not ideal, as it could make the whole page take a while to load up. Is there any chance of this functionality being added at some point?

[Alex Gyoshev]

Hello Anthony,

This functionality is not scheduled for implementation in the ASP.NET MVC wrappers. However, you can achieve it by manually fetching the data from the server and instantiating the chart on the client-side:

$.ajax({ url: "/winners", success: function(data) {
    $("#chart").kendoChart({
        dataSource: data[0].winners
        // define plot bands or line series by parsing other data
    });
});

Regards,
Alex Gyoshev
Telerik