Stacked graph with KendoUI

Question

I'm trying to display data in a stacked graph 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);

Note that September and October data do not have values for some series. This completely screws up the chart display in quite unexplainable way:

Chart example

As you can see both September and October data do not match the json. It's especially weird with October data because three values are displayed whereas only 2 are given.

Here is JSFiddle: http://jsfiddle.net/12ob7qmx/6/

Are there any settings on the chart that I can set so it works, or will I have to loop through the dataset and fill in missing data with zero values?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

The way I solved this issue is by looping through my data and adding missing values with 0's.

I don't think there is a better way, than what you suggested yourself. :(

I found a question concerning this issue on the Telerik forums:

The behavior you have observed is expected as the categorical charts (bar, area etc.) require a matching set of data points (the value can be null but it should persist in the data). I am afraid there is no built-in functionality which will automatically set 0 for the missing values - you should modify your data.

I am afraid the implementation of this functionality is not in our immediate plans, however we may consider it for future versions of the product.

I haven't found more recent information, but as far as I know this hasn't been fixed.

score 0 · Accepted Answer · answered May 05 '15 at 20:34

It' looks like I'm out of luck and I need to fix up the data. In my actual solution I'm doing that server-side, but for posterity if anyone needs a kickstart with a purely 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/

Stacked graph with KendoUI

2 Answers2