This is a migrated thread and some comments may be shown as answers.

Chart is not rendering as I would expect.. where's my error?

1 Answer 18 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Justice
Top achievements
Rank 1
Justice asked on 28 Sep 2018, 02:55 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Justice
Top achievements
Rank 1
answered on 28 Sep 2018, 03:08 PM

Ahhhhh nevermind, found my mistake...

 

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);

CategoryField should be "Category", not "Jordan".... 

 

This thread can be closed/deleted..

Tags
Charts
Asked by
Justice
Top achievements
Rank 1
Answers by
Justice
Top achievements
Rank 1
Share this question
or