Scatter Chart Dynamic Series (ASP.NET MVC)

[Ronald]

Hi,

I've created a Scatter chart in ASP.NET MVC with the code below:

@(Html.Kendo().Chart<GIPM.DAL.ViewModels.ProductsCountByCountryYear>()
    .Name("linechart")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .DataSource(ds => ds
        .Read(read => read.Action("GetProductsCountByCountry", "Products", new { country = ""}))
                                .Group(group => group.Add(model => model.Country))
                                .Sort(sort => sort.Add(model => model.Year).Ascending())
    )
    .Series(series =>
    {
        series.ScatterLine(model => model.Year, model => model.Count)
            .Name("Country")
            .GroupNameTemplate("#= group.value #");
    })
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .YAxis(axis => axis.Numeric()
        .Labels(labels => labels
            .Format("{0}")
        )
        .MajorUnit(1)
    )
    .XAxis(axis => axis.Date()
        .Labels(labels => labels.Format("{0}"))
        .MajorUnit(1)
    )
)

The above is calling a method in the Products controller below:

public ActionResult GetProductsCountByCountry( string country)
{

var query = _customsService.GetExportSeizedCountByCountry(country);

return Json(query, JsonRequestBehavior.AllowGet);
}

The chart will refresh when a new country is selected by the script below:

$("#chart").data("kendoChart").dataSource.read({ country: strcountry });

However, the page will freeze at times due to a "long running script".  The DataSource of the chart calls the action GetProductsCountByCountry and groups the data.  I want to do the grouping on the server side but I'm not sure how to change the code for my chart for dynamic series without doing what I'm currently doing.

This is the first time I'm using Kendo DataViz and I really could use some help.

Thanks!

[T. Tsonev]

Hello,

The Chart MVC helper does not support server data source operations. Even if did, I doubt that they would have dramatic effect on performance.

My guess is that the Chart has problem with rendering the numerous series points that are being produced.

Have you considered using a line chart with data grouping instead? It will aggregate the series points into as few baseUnits as required.

Regards,
Tsvetomir Tsonev
Telerik

[Ronald]

Thanks for the response, Tsvetomir.
I tried using line chart but I think I'm not doing it right
Here's my code:

@(Html.Kendo().Chart<GIPM.DAL.ViewModels.ProductsCountByCountryYear>()
    .Name("linechart")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .DataSource(ds => ds
                        .Read(read => read.Action("GetProductCountByCountry", "Customs"))
        .Group(group => group.Add(model => model.Country))
        .Sort(sort => sort.Add(model => model.Year).Ascending())
    )

    .Series(series =>
    {
        series.Line(model => model.Count)
            .Name("Country")
            .GroupNameTemplate("#= group.value #");
    })
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels
            .Format("{0}")
        )
        .MajorUnit(1)
    )
    .CategoryAxis(axis => axis
        .Categories(model => model.Year)
        .Labels(labels => labels.Format("{0}"))
    )
    .Events(events => events
        .SeriesClick("onLineSeriesClick")
    )
)

The data model that is being passed to the chart is as follows:
Country: China to United Kingdom
Count: 2
Year: 2011

Country: China to United Kingdom
Count: 3
Year: 2012

Country: China to United Kingdom
Count: 4
Year: 2013

Country: China to United Kingdom
Count: 1
Year: 2014

Country: China to Philippines
Count: 1
Year: 2013

However, the chart generated is incorrect, please see attached screenshot. 
What am I doing wrong?

Thanks.

[T. Tsonev]

Hi,

This is actually a limitation of the chart. It treats series values as a sequence and the order must match across series. In other words all series must have values for 2011, 2012, etc.

We've addressed this issue in our latest Beta release. It allows you to specify a category binding for each series:
    .Series(series =>
    {
        series.Line(model => model.Count, model => Year)
            .Name("Country")
            .GroupNameTemplate("#= group.value #");
    })
    )
    .CategoryAxis(axis => axis
        .Labels(labels => labels.Format("{0}"))
    )

Please, give it a go and let us know if this helps. Regards,
Tsvetomir Tsonev
Telerik

[Ronald]

Thanks,   Tsvetomir.

Is there a way to download the Beta Release without using the Telerik Control Panel?

Every time I try to install the Control Panel, I get the attached error.

Regards,
Ronald

[Sebastian]

Hello Ronald,

The Q2'13 Beta should be available as an individual download under your Kendo UI DataViz commercial package, part of the DevCraft Ultimate license you own. Kendo UI Betas are not served via the Telerik Control Panel. More directions about the Beta download are available in this blog post.

For issues concerning the Control Panel, please submit a separate support ticket under the respective installer category.

Regards,
Sebastian
Telerik