Problem creating multi-series line charts with local data

3 posts, 1 answers
  1. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 26 Feb Link to this post

    Using Kendo UI for ASP.NET MVC, I am creating and passing in a Model that contains a collection of objects (called ChartSeries) that has fields for Color, SeriesName, and a collection of a second class (ChartSeriesValue) which contains fields Value, Date. I am trying to create a line chart using this local data with a dynamic number of series. Using a foreach statement, I can get the different series values plotted, but am unable to get the Dates to display using CategoryAxis. Will I have to go the route of using DataSource to group the flattened data, or is it possible to accomplish this using localdata? 

    Here are the chart-related classes I am using:

    public class ChartSeries
            public string SeriesName { get; set; }
            public string ValueType { get; set; }
            public string HexColor { get; set; }
            public IList<ChartSeriesValue> ChartSeriesValues { get; set; }
    public class ChartSeriesValue
            public decimal? Value { get; set; }
            public DateTime Effective { get; set; }


    Thus far, I have been able to get either the lines with proper values, or just the X-Axis date labels to display, but not both. Here's my current attempt that displays proper line series data without X-Axis labels:

                  .Name("myChart_" + Model.MyChart.Id)
                  .Legend(legend => legend
                  .ChartArea(chartArea => chartArea
                  .SeriesDefaults(seriesDefaults =>
                  .Series(series =>
                      if (!Model.ChartSeriesList.IsNullOrEmpty())
                          foreach (var metSeries in Model.ChartSeriesList)
                              if (!metSeries.ChartSeriesValues.IsNullOrEmpty())
                  .CategoryAxis(axis => axis
                      .Categories(x => x.Effective.Date)
                      .Name("Effective Date")
                      //.MajorGridLines(lines => lines.Visible(true))
                      .Labels(labels => labels.Visible(true))


    Please let me know if you need further clarification. Thanks!



  2. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 29 Feb Link to this post

    I'll add a little more info to hopefully elucidate my problem a little better: 

    Client can create multiple series for a given chart - this is stored as metadata in the database. Client has the ability to set date ranges, line colors, and Min and Max values for Y-Axis. So basically, I have a collection of series data, and each collection contains the values (Value and Date) in a collection of its own. 

    Will I need to use DataSource to group a flattened version, or is there a way to get these values into a line chart from local data? 

  3. UI for ASP.NET AJAX banner
  4. Answer
    Iliana Nikolova
    Iliana Nikolova avatar
    2571 posts

    Posted 02 Mar Link to this post

    Hi James,

    Apologies for the delayed reply.

    When date axis is used you must bind the series by using categoryField not categoryAxis.field (documentation link). For working example check this online demo.

    Iliana Nikolova
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top