Kendo Area Chart showing incorrect chart

[parag]

Hi, 

I am using kendo chart to visualize some data. 

The data looks like below: 

    

my Kendo Code/chart code looks like below:

{
   "timestamp": 1454664601000,
   "strategyId": 14,
   "count": 6
 }

And here is the Kendo Javascript code to render the chart. 

var messageRateData = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "content/shared/message-rate-details.json",
                        dataType: "json"
                    }
                },
                sort: {
        field: "timestamp",
        dir: "asc"
        },
        group: {
                    field: "strategyId"
                }
            });

$("#chart10").kendoChart({
            dataSource: messageRateData,
            title: {
                text: "Message Rate Details in 10 min interval"
            },
            legend: {
                position: "top"
            },
    series: [{
                        type: "area",
            stack: true,
            field: "count",
            name: "StrategyId #= group.value #"
                    }],
    valueAxis: {
                labels: {
                    format: "{0}"
                },
                line: {
                    visible: false
                }
            },
     categoryAxis: {
                field: "timestamp",
        type: "date",
        labels: {
                    format: "hh:mm:ss"
                    }
            },
            tooltip: {
                visible: true,
                format: "{0}"
    }
});

However to my utter surprise I find that the data points is not displayed correctly for the first data-point. i.e. "03:00:01" for the given StrategyId.

Please find the screen shots below. Here the data and the plot is attached in the pic. the data point at timestamp : 1454664605000 (i.e. 03:00:05) should render two bars/areas (for strategyId 14 and 16), however it seems to be shifted to earlier time. 

Ideally for timestamp :03:00:05, I should see two plots/bars for StrategyId 14 and StrategyId 16, however It seems to be shifted to earlier time viz "03:00:01 and 03:00:02 .

 

 

Any help/corrections/work around would be greatly appreciated. 

[EZ]

Does it help if you tell the dataSource via schema that the timestamp field is a date?

 

var messageRateData = new kendo.data.DataSource({
    transport: {
        read: {
            url: "content/shared/message-rate-details.json",
            dataType: "json"
        }
    },
    sort: {
        field: "timestamp",
        dir: "asc"
    },
    group: {
        field: "strategyId"
    },
    schema: {
        model: {
            fields: {
                Timestamp: {
                    type: "date"
                }
            }
        }
    }
});

[parag]

Nope it did not help. Still the same results. 

[Iliana Dyankova]

Hi Parag,

I believe the issue is caused by there is a different number of points in each of the groups. In this case you should use series.categoryField instead of categoryAxis.field. For more details check the corresponding documentation:

http://docs.telerik.com/kendo-ui/controls/charts/data-binding#bind-to-grouped-data

Regards,
Iliana Nikolova
Telerik