Hi there,
We have a Kendo Column chart that we are using to display the number of tickets assigned to an individual per month for the rolling 13 months. I recently added a new employee to the list (Jordan), and now the chart is not forming correctly, and I can't seem to find my error. Please see attached screenshots.
Chart definition (ASP.NET MVC):
@(Html.Kendo().Chart<
Brandt.BGC.HeadOffice.ViewModels.BGC.FootPrints.AssigneesByMonthColumnChartVm
>()
.Name("assigneesMonthly")
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
.Labels(x => x.Font(font: "24px Arial,Helvetica,sans-serif"))
)
.Theme("moonlight")
.ChartArea(chart => chart
.Background("transparent")
)
.SeriesColors("#FE4819", "#94C7E4", "#54B948", "#EEB211", "#731100", "#0000ff", "purple")
.DataSource(ds =>
{
ds.Read(read => read.Action(actionName: "HelpdeskStatistics_AssigneesMonthly", controllerName: "FootPrints", routeValues: new { area = "BGC" }));
})
.Series(series =>
{
series.Column(model => model.Aiden).Name("Aiden").CategoryField("Category").ColorField("AidenColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Dallas).Name("Dallas").CategoryField("Category").ColorField("DallasColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Micheal).Name("Micheal").CategoryField("Category").ColorField("MichealColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Justin).Name("Justin").CategoryField("Category").ColorField("JustinColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Scott).Name("Scott").CategoryField("Category").ColorField("ScottColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Jordan).Name("Jordan").CategoryField("Jordan").ColorField("JordanColour").Overlay(ChartBarSeriesOverlay.None);
series.Column(model => model.Other).Name("Other").CategoryField("Category").ColorField("OtherColour").Overlay(ChartBarSeriesOverlay.None);
})
.CategoryAxis(axis => axis
.MajorGridLines(lines => lines.Visible(true))
.Labels(x => x.Font("20px Arial,Helvetica,sans-serif"))
)
.ValueAxis(axis => axis.Numeric()
.Line(line => line.Visible(false))
.Labels(x => x.Font("20px Arial,Helvetica,sans-serif"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
The datasource looks correct:
c = $(
"#assigneesMonthly"
).data(
"kendoChart"
).dataSource.data().toJSON()
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
Aiden: 439
AidenColour:
"#FE4819"
Category:
"Sep-17"
Dallas: 482
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 189
JustinColour:
"#EEB211"
Micheal: 559
MichealColour:
"#54B948"
Other: 333
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
1:
Aiden: 356
AidenColour:
"#FE4819"
Category:
"Oct-17"
Dallas: 480
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 393
JustinColour:
"#EEB211"
Micheal: 457
MichealColour:
"#54B948"
Other: 551
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
2:
Aiden: 357
AidenColour:
"#FE4819"
Category:
"Nov-17"
Dallas: 438
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 328
JustinColour:
"#EEB211"
Micheal: 396
MichealColour:
"#54B948"
Other: 493
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
3:
Aiden: 571
AidenColour:
"#FE4819"
Category:
"Dec-17"
Dallas: 367
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 441
JustinColour:
"#EEB211"
Micheal: 212
MichealColour:
"#54B948"
Other: 378
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
4:
Aiden: 493
AidenColour:
"#FE4819"
Category:
"Jan-18"
Dallas: 496
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 565
JustinColour:
"#EEB211"
Micheal: 264
MichealColour:
"#54B948"
Other: 576
OtherColour:
"purple"
Scott: 0
ScottColour:
"#731100"
__proto__: Object
5:
Aiden: 341
AidenColour:
"#FE4819"
Category:
"Feb-18"
Dallas: 389
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 418
JustinColour:
"#EEB211"
Micheal: 198
MichealColour:
"#54B948"
Other: 401
OtherColour:
"purple"
Scott: 24
ScottColour:
"#731100"
__proto__: Object
6:
Aiden: 450
AidenColour:
"#FE4819"
Category:
"Mar-18"
Dallas: 444
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 456
JustinColour:
"#EEB211"
Micheal: 145
MichealColour:
"#54B948"
Other: 425
OtherColour:
"purple"
Scott: 348
ScottColour:
"#731100"
__proto__: Object
7:
Aiden: 408
AidenColour:
"#FE4819"
Category:
"Apr-18"
Dallas: 430
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 491
JustinColour:
"#EEB211"
Micheal: 109
MichealColour:
"#54B948"
Other: 344
OtherColour:
"purple"
Scott: 369
ScottColour:
"#731100"
__proto__: Object
8:
Aiden: 610
AidenColour:
"#FE4819"
Category:
"May-18"
Dallas: 360
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 409
JustinColour:
"#EEB211"
Micheal: 121
MichealColour:
"#54B948"
Other: 333
OtherColour:
"purple"
Scott: 405
ScottColour:
"#731100"
__proto__: Object
9:
Aiden: 402
AidenColour:
"#FE4819"
Category:
"Jun-18"
Dallas: 495
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 596
JustinColour:
"#EEB211"
Micheal: 175
MichealColour:
"#54B948"
Other: 467
OtherColour:
"purple"
Scott: 342
ScottColour:
"#731100"
__proto__: Object
10:
Aiden: 608
AidenColour:
"#FE4819"
Category:
"Jul-18"
Dallas: 341
DallasColour:
"#94C7E4"
Jordan: 0
JordanColour:
"#0000ff"
Justin: 568
JustinColour:
"#EEB211"
Micheal: 119
MichealColour:
"#54B948"
Other: 180
OtherColour:
"purple"
Scott: 236
ScottColour:
"#731100"
__proto__: Object
11:
Aiden: 525
AidenColour:
"#FE4819"
Category:
"Aug-18"
Dallas: 369
DallasColour:
"#94C7E4"
Jordan: 354
JordanColour:
"#0000ff"
Justin: 389
JustinColour:
"#EEB211"
Micheal: 147
MichealColour:
"#54B948"
Other: 201
OtherColour:
"purple"
Scott: 225
ScottColour:
"#731100"
__proto__: Object
12:
Aiden: 289
AidenColour:
"#FE4819"
Category:
"Sep-18"
Dallas: 442
DallasColour:
"#94C7E4"
Jordan: 533
JordanColour:
"#0000ff"
Justin: 476
JustinColour:
"#EEB211"
Micheal: 94
MichealColour:
"#54B948"
Other: 219
OtherColour:
"purple"
Scott: 149
ScottColour:
"#731100"
__proto__: Object
length: 13
We can see in the data source that there are 13 categories, so why is the chart rendering 16? (And why is it using the values for Jordan as the X-axis category names?)
I am sure I missed some small detail, but I can't seem to find it, any help?
Thanks