Folded graph with KendoUI
I am trying to display data on a stack using kendo ui. Here is my code:
var data = [
// June
{ Start: "2014-06-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-06-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-06-01T00:00:00", Name : "Series 3", Value: 10 },
// July
{ Start: "2014-07-01T00:00:00", Name : "Series 1", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-07-01T00:00:00", Name : "Series 3", Value: 2 },
// August
{ Start: "2014-08-01T00:00:00", Name : "Series 1", Value: 3 },
{ Start: "2014-08-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-08-01T00:00:00", Name : "Series 3", Value: 1 },
// September
{ Start: "2014-09-01T00:00:00", Name : "Series 2", Value: 2 },
{ Start: "2014-09-01T00:00:00", Name : "Series 3", Value: 3 },
// October
{ Start: "2014-10-01T00:00:00", Name : "Series 1", Value: 1 },
{ Start: "2014-10-01T00:00:00", Name : "Series 3", Value: 3 }
]
var stocksDataSource = new kendo.data.DataSource({
data: data,
group: {
field: "Name"
},
sort: [{ field: "Start", dir: "asc"} ]
});
function createChart() {
$("#chart").kendoChart({
dataSource: stocksDataSource,
series: [{
type: "column",
field: "Value",
name: "#= group.value #",
stack: true,
tooltip: {
template: "#=kendo.toString(new Date(category), 'd MMM yyyy')#<br/>" +
"#=dataItem.Name#<br/>"+
"Value: #=dataItem.Value#",
visible: true
},
}],
categoryAxis: {
field: "Start",
type: "date",
labels: {
format: "MMM"
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Please note that September and October data are not relevant for some episodes. This completely twists the chart display in a completely inexplicable way:
As you can see, September and October data is not json compliant. This is especially strange with October data, because three values are displayed when only 2 is given.
Here is a JSFiddle: http://jsfiddle.net/12ob7qmx/6/
Are there any settings on the chart that I can set to work, or will I have to loop through the dataset and fill in the missing data with null values?
source to share
It looks like I'm out of luck and need to fix the data. In my actual solution, I'm doing this server side, but for posterity, if anyone needs a kickstart with a pure js fix, this is the starting point:
function fixData(data) {
var lookup =[], start = [], name = [], result =[];
for (i = 0, len = data.length; i < len; ++i) {
start[data[i].Start] = true;
name[data[i].Name] = true;
lookup[data[i].Start + "," + data[i].Name] = data[i].Value;
}
for (var currentStart in start) {
for (var currentName in name) {
var entry = {Start: currentStart, Name: currentName};
entry.Value = lookup[currentStart + "," + currentName] || 0;
result.push(entry);
}
}
return result;
}
JSFiddle: http://jsfiddle.net/12ob7qmx/8/
source to share
The way I solved this problem was to iterate over my data and add the missing values from 0.
I don't think there is a better way than what you suggested yourself. :(
I found a question about this on the Telerik forums:
The behavior you observed is expected as categorical charts (bar, area, etc.) require an appropriate set of data points (value can but must be stored in the data). I'm afraid there is no built-in functionality that will automatically set 0 for no value - you have to change your data.
I'm afraid the implementation of this feature is not in our immediate plans, but we may consider it for future versions of the product.
I have not found more recent information, but as far as I know this has not been fixed.
source to share