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!