Problem creating multi-series line charts with local data

[James]

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:

@(Html.Kendo().Chart<ChartSeriesValue>()
              .Name("myChart_" + Model.MyChart.Id)
              .Title(Model.MyChart.Name)
              .Legend(legend => legend
                  .Position(ChartLegendPosition.Bottom)
              )
              .ChartArea(chartArea => chartArea
                  .Background("transparent")
                  .Width(250)
                  .Height(250)
              )
              .SeriesDefaults(seriesDefaults =>
                  seriesDefaults.Line().Style(ChartLineStyle.Smooth)
              )
              .Series(series =>
              {
                  if (!Model.ChartSeriesList.IsNullOrEmpty())
                  {
                      foreach (var metSeries in Model.ChartSeriesList)
                      {
                          if (!metSeries.ChartSeriesValues.IsNullOrEmpty())
                          {
                              series.Line(metSeries.ChartSeriesValues)
                                  .Field("Value")
                                  .Name(metSeries.SeriesName)
                                  .Color(metSeries.HexColor);
                          }
                      }
                  }
              })
              .CategoryAxis(axis => axis
                  .Categories(x => x.Effective.Date)
                  .Name("Effective Date")
                  //.Name("Effective")
                  //.MajorGridLines(lines => lines.Visible(true))
                  //.Date().BaseUnit(ChartAxisBaseUnit.Months)
                  .Labels(labels => labels.Visible(true))
                  .Color("Red")//.Rotation(-60))
                               //.Type(ChartCategoryAxisType.Date)
              )
              ))

 

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

 

 

[James]

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? 

[Iliana Dyankova]

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.

Regards,
Iliana Nikolova
Telerik