Scatter Chart Dynamic Series (ASP.NET MVC)

6 posts, 0 answers
  1. Ronald
    Ronald avatar
    19 posts
    Member since:
    Jun 2012

    Posted 24 Jun 2013 Link to this post

    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!



  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2812 posts

    Posted 26 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ronald
    Ronald avatar
    19 posts
    Member since:
    Jun 2012

    Posted 27 Jun 2013 Link to this post

    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.





  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2812 posts

    Posted 28 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ronald
    Ronald avatar
    19 posts
    Member since:
    Jun 2012

    Posted 01 Jul 2013 Link to this post

    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
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top