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:
publicclassChartSeries { publicstringSeriesName { get; set; } publicstringValueType { get; set; } publicstringHexColor { get; set; } publicIList<ChartSeriesValue> ChartSeriesValues { get; set; } }publicclassChartSeriesValue { publicdecimal? Value { get; set; } publicDateTime 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!