Is this a bug? Stacking time series ignores the da

Question

I'm attempting to display two series on a single line chart in KendoUI.

The dates in the series don't match (that is, series two starts after series one, and finishes before series one). KendoUI however renders both series starting from the beginning of the chart.

I've created a simple jsfiddle to demonstrate the issue, summarised here:

HTML:

<div id="chart" />

CSS:

#chart
{
    width: 400px;
    height: 280px;
}

JS:

$(function () {
    var dataSource = new kendo.data.DataSource({
        data: [
            { series: 'Series 1', date: new Date(2013, 04, 01), count: 1 },
            { series: 'Series 1', date: new Date(2013, 04, 02), count: 3 },
            { series: 'Series 1', date: new Date(2013, 04, 03), count: 5 },
            { series: 'Series 1', date: new Date(2013, 04, 04), count: 3 },
            { series: 'Series 1', date: new Date(2013, 04, 05), count: 1 },
            { series: 'Series 2', date: new Date(2013, 04, 02), count: 5 },
            { series: 'Series 2', date: new Date(2013, 04, 03), count: 3 },
            { series: 'Series 2', date: new Date(2013, 04, 04), count: 5 }
        ],

        group: {
            field: 'series'
        },

        sort: {
            field: 'date',
            dir: 'asc'
        },

        schema: {
            model: {
                fields: {
                    date: {
                        type: 'date'
                    }
                }
            }
        }
    });

    dataSource.read();

    $('#chart').kendoChart({
        title: {
            text: 'Date Demonstration'
        },

        dataSource: dataSource,

        seriesDefaults: {
            type: 'line'
        },

        series: [{
            field: 'count',
            data: []
        }],

        valueAxis: {
            line: {
                visible: false
            },

            labels: {
                step: 2,
                template: function (value) {
                    return value.value % 1 === 0 ? value.value : ' ';
                }
            }
        },

        categoryAxis: {
            field: 'date',

            type: 'date',

            labels: {
                template: function (value) {
                    return value.value.getDate();
                }
            }
        },

        legend: {
            position: 'bottom'
        }
    });
});

The graph should have the second series starting at '2', instead it starts at '1'.

Anyone have any idea on how to fix this? Is this a bug in KendoUI?

Answer 1

UPDATE: Kendo responded to a support request that we subsequently opened:

The line chart works like that. You have some categories and then you give a values for each category. In your case I will suggest you to use scatter line chart or you need to fill the missing values from the second series with null as a value.

I thus consider this a wontfix bug, because in this case I told the chart that the category axis is a date; and then gave it the field from the data source to get those dates from. The chart should be capable of plotting those values to the chart in the correct date category.