Line Chart Example Dataset

2 posts, 0 answers
  1. Hatton Point
    Hatton Point avatar
    14 posts
    Member since:
    Dec 2012

    Posted 06 Feb 2013 Link to this post

    Trying to work through the online demos, there is no representation of what the actual dataset or viewmodels look like. This makes it difficult to format data properly to be consumed by the dataviz controls.

    I have the following model:

    public class ReportMonthTotals
    {
        public string Month { get; set; }
        public int Year { get; set; }
        public decimal Total { get; set; }
    }

    The data looks as such, a column for the month, the year, and the total.
    1 2013 1200.00
    12 2012 1350.00
    11 2012 1100.00
    10 2012 1050.00

    I need to display in a Line chart with a Series for each year (2013, 2012, 2011...) over the Category (X) Axis of Month (Jan, Feb, Mar...Dec). Value (Y) Axis is Total.

    This is the start of my control, but its obviously missing something as I get a nonsensical result:

    @(Html.Kendo().Chart<Reporting.Data.SalesModel.ReportMonthTotals>()
        .Name("salesChart")
        .Title("Sales")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series =>
        {
            series.Line(m => m.Total);
        })
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels
                .Format("${0}")
            )
        )
        .CategoryAxis(axis => axis
            .Categories(m => m.Month)
        )
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Sales_Read", "Sales")
               .Group(group => group.Add(m => m.Year))
        )
    )

    My Controller:

    public ActionResult Sales_Read([DataSourceRequest] DataSourceRequest request)
    {
       return Json(SalesModel.GetSales(), JsonRequestBehavior.AllowGet);
    }

    GetSales() returns a List of object ReportMonthTotals

    What exactly am I missing? Thanks.
  2.
  3. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 10 Feb 2013 Link to this post

    Hello,

    The code looks correct and a series for each should be displayed. Could you clarify what is the problem with the current visualization? Also, please try to sort the dataSource on the Month as currently the data seems to be unordered e.g.

    .Group(group => group.Add(m => m.Year))
    .Sort(sort=> sort.Add(m => m.Month))
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top