Kendo Area Chart Refreshing the entire chart for every new data point

[Dilip]

Hi,

I have a Kendo Area Chart defined as follows:

 

$("#rawmessagechartLiveStream").kendoChart({
dataSource: rawMessageStreamChartData,
series: [{
field: "value",
categoryField: "date"
}],
seriesDefaults:{
type: "area",
area: {
                    line: {
                        style: "smooth"
                    }
                }
},
categoryAxis: {
baseUnit: "minutes",
majorGridLines: {
visible: true
}
},
valueAxis: [{
title: {
text: "Events/Second"
}
}],
tooltip: {
           visible: true,
           format: "{0}",
           template: "#= series.name #: #= value #"
       },
autoBind: true
});

I have defined the dataSouce as follows:

 var rawMessageStreamChartData = new kendo.data.DataSource({
type: "json",
pageSize: 100,
filterable: true,
scrollable: true
});

 Everytime i get a bunch of data points from the server i do the following to update the datsSource:

for (var i = 0; i < eventRateData.length; i++) {
rawMessageStreamChartData.insert(0, eventRateData[i]);
}

This is causing the entire chart to refresh and it looks like a flicker every time it refreshes. I am looking to plot the new data points and scroll the chart x-axis smoothly so it looks like a scrolling live chart. Is there any way to do this. I am basically looking to plot minute based date points like a histogram that scrolls with time.

Please advice!

 

[Iliana Dyankova]

Hi Dilip,

Adding new points to its dataSource will cause the chart to refresh and this behavior cannot be prevented. In order to avoid the flickering I would suggest stopping the chart animations: 

$("#rawmessagechartLiveStream").kendoChart({
   //....
   transitions: false
});

On a side note, you could check this example which demonstrates a similar to the described scenario.

Regards,
Iliana Nikolova
Telerik