I have a column chart, defined in MVC as below:-
@(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)
.Name((string)ViewBag.ChartName)
.Title((string)ViewBag.ChartTitle)
.Theme(
"bootstrap"
)
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
.Visible(
false
)
)
.Series(series =>
{
series.Column(model => model.BarValue).Name(
"Actual"
).Tooltip(t=>t.Visible(
true
).Template(
"<div><p>Category:#=dataItem.AxisDescription#</p><p>Contribution: £#=dataItem.DisplayBarValue#</p></div>"
));
})
.ChartArea(area => area
.Height(350)
.Background(
"transparent"
)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format(
"{0:N2}"
))
.Title((string)ViewBag.Yaxis)
.AxisCrossingValue(0, int.MinValue)
.Line(line => line.Visible(
false
))
)
.CategoryAxis(axis => axis
.Labels(
false
))
.CategoryAxis(axis => axis
.Categories(model => model.AxisValue)
.Labels(labels => labels.Rotation(-45).Padding(5))
.MajorGridLines(lines => lines.Visible(
false
))
.Title((string)ViewBag.Xaxis)
)
.Events(e=>e.SeriesClick(
"seriesClick"
))
.Tooltip(tooltip => tooltip
.Visible(
true
)
.Format(
"{0:N2}"
)
)
)
I then use the SeriesClick event, to implement a data drill-down, which refreshes with the chart with new data (based on the level of drill-down and the value of the clicked column), based on an Ajax call, which gets new JSON data.
function
PODDrillDown(pod,conscode,specialtycode,directorateCode, period)
{
var
directorate = directorateCode;
selectedDirectorate = directorateCode;
selectedspec = specialtycode;
selectedcons = conscode;
selectedPOD = pod;
var
chartData;
$.ajax({
type:
"POST"
,
async:
true
,
contentType:
"application/json;charset=utf-8"
,
url:
"@Url.Content("
~/ChartMaker/GetHRGChapterBarChartData
")"
,
data:
'{"id":2,"periodID":'
+ period +
',"DirectorateCode":"'
+ directorate +
'","SpecCode":"'
+ specialtycode +
'","ConsCode":"'
+ conscode +
'","POD":"'
+ pod +
'" }'
,
dataType:
"json"
,
success:
function
(data) {
if
(data.Success ==
true
) {
chartData = data.chartData;
var
dataSource =
new
kendo.data.DataSource({
data: chartData
});
var
chart = $(
"#Chart_ID_1"
).data(
"kendoChart"
);
chart.dataSource = dataSource;
chart.options.title.text = data.ChartTitle;
chart.options.valueAxis.title.text = data.YAxisTitle;
chart.options.categoryAxis[1].title.text = data.XAxisTitle;
chart.dataSource.read();
chart.refresh();
}
else
{
alert(data.Error);
}
},
error:
function
() {
alert(
"An error has occurred"
);
}
});
}
This works well, however with one particular drill-down , the chart doesn't render properly. The series labels are shown, the value axis seems scaled correctly, but the columns aren't rendered (I've attached an image of the chart). I can't see any issues with the data, all the data calls return data in the same structure, and no errors are thrown.
The Ajax call returns the data below :-
{"ChartTitle":"Performance for Consultant 4835","XAxisTitle":"Point of Delivery","YAxisTitle":"Contribution (£)","Success":true,"Message":"Data retrieved","Error":null,"chartData":[{"BarValue":-2476080.767381317,"AxisValue":"Other","AxisCode":"OTHER","ExtraValue":4,"AxisDescription":"Other","DisplayBarValue":"-2,476,081"},{"BarValue":-2476080.7673813165,"AxisValue":"Block","AxisCode":"BLOCK","ExtraValue":4,"AxisDescription":"Block","DisplayBarValue":"-2,476,081"}]}
Is this a bug in the chart, or is it something in the code?
Thanks