This is a migrated thread and some comments may be shown as answers.

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

1 Answer 120 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Dilip
Top achievements
Rank 1
Dilip asked on 09 Oct 2015, 07:48 PM

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!

 

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 13 Oct 2015, 01:54 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Dilip
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or