Hello,
We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client). We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers. We're currently calling the refresh() method on the chart to redraw after we append new values to the data source. Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate? For comparison, the Flot library for jQuery is noticeably smooth when rendering.
Thank you.
We're evaluating tools for drawing data that will be dynamically changing (streams of data being pushed to the client). We tried setting up a page using the Kendo UI Graph. The data renders and updates, but the redraw is noticeably slow and flickers. We're currently calling the refresh() method on the chart to redraw after we append new values to the data source. Is there are more efficient method for redrawing streaming data or some parameters that affect the redraw behavior that I haven't been able to locate? For comparison, the Flot library for jQuery is noticeably smooth when rendering.
Thank you.
12 Answers, 1 is accepted
0
Hi Kevin,
In order to achieve this you can bind your Chart to a DataSource (like in most of the online demos). Hence when the DataSource is changed the Chart widget will automatically refresh. For your convenience I prepared a jsBin example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
In order to achieve this you can bind your Chart to a DataSource (like in most of the online demos). Hence when the DataSource is changed the Chart widget will automatically refresh. For your convenience I prepared a jsBin example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kevin
Top achievements
Rank 1
Rank 1
answered on 02 Feb 2013, 06:46 PM
Hi Iliana,
Thank you for your response. The use case we're looking at has to do with a rapidly changing "window" of data. To mimic our scenario in your jsBin example, add a call to append data that's triggered on an interval (see below). We'd be using a line chart rather than a bar chart and limiting the number of values drawn to some max size, but that doesn't affect the issue. I'm guessing that the refresh will always re-render the entire graph. Is the optimization of this something you may be looking into in the future?
Thank you
var intervalId = setInterval(function() {
$("#chart").data("kendoChart").dataSource.add({
"country": "United States",
"year": "2010",
"value": 55
})
}, 500);
Thank you for your response. The use case we're looking at has to do with a rapidly changing "window" of data. To mimic our scenario in your jsBin example, add a call to append data that's triggered on an interval (see below). We'd be using a line chart rather than a bar chart and limiting the number of values drawn to some max size, but that doesn't affect the issue. I'm guessing that the refresh will always re-render the entire graph. Is the optimization of this something you may be looking into in the future?
Thank you
var intervalId = setInterval(function() {
$("#chart").data("kendoChart").dataSource.add({
"country": "United States",
"year": "2010",
"value": 55
})
}, 500);
0
Hello Kevin,
I am not quite sure if I understand you correctly - could you please elaborate a bit more? This way I would be able to advice you further and suggest the most appropriated solution for your scenario (if such is possible). Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
the Telerik team
I am not quite sure if I understand you correctly - could you please elaborate a bit more? This way I would be able to advice you further and suggest the most appropriated solution for your scenario (if such is possible). Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Rank 1
answered on 07 Jan 2014, 08:54 AM
but it's cannot working
0
John
Top achievements
Rank 1
Rank 1
answered on 07 Jan 2014, 09:00 AM
how to change bar chat values dynamically using javascript/jquery
0
Hi John,
Did you try the suggestion from my first post? If yes - did you observe any difficulties?
Regards,
Iliana Nikolova
Telerik
Did you try the suggestion from my first post? If yes - did you observe any difficulties?
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Rank 1
answered on 07 Jan 2014, 10:33 AM
i used your coding below it's working only refreshing page again and again,but cannot change values.
<body>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
function ok()
{
var intervalId = setInterval(function() {
$("#chart").data("kendoChart").dataSource.add({
"name": "Total Visits",
"data": "40000",
"categories":"july"
})
}, 5000);
}
</script>
<style scoped>
.chart-wrapper, .chart-wrapper .k-chart {
height: 350px;
}
</style>
</div>
<b onclick="ok()">click</b>
</body>
<body>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
function ok()
{
var intervalId = setInterval(function() {
$("#chart").data("kendoChart").dataSource.add({
"name": "Total Visits",
"data": "40000",
"categories":"july"
})
}, 5000);
}
</script>
<style scoped>
.chart-wrapper, .chart-wrapper .k-chart {
height: 350px;
}
</style>
</div>
<b onclick="ok()">click</b>
</body>
0
Hello again John,
My example is due to a chart bound to dataSource, however from the provided code it appears you are using a chart with inline data. In this case you could change the values through series.options and refresh the chart. For your convenience here is the updated example.
Regards,
Iliana Nikolova
Telerik
My example is due to a chart bound to dataSource, however from the provided code it appears you are using a chart with inline data. In this case you could change the values through series.options and refresh the chart. For your convenience here is the updated example.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2014, 06:31 AM
It's working thanks for your reply and,
I have chart for sales report ,It display p1 and p2 sales report month wise,(bar chart)
if i click Jan P1 sales report ,
it display that details separate chart date wise,
you have any idea for that
I have chart for sales report ,It display p1 and p2 sales report month wise,(bar chart)
if i click Jan P1 sales report ,
it display that details separate chart date wise,
you have any idea for that
0
Hello John,
I am not quite sure if I understand correctly what the issue is. Is it possible to provide a simple jsBin / jsFiddle example which demonstrates your current implementation? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
Telerik
I am not quite sure if I understand correctly what the issue is. Is it possible to provide a simple jsBin / jsFiddle example which demonstrates your current implementation? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your cooperation.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Rank 1
answered on 09 Jan 2014, 07:33 AM
Thanks for your reply
Here i attached my files
i want to get data from json file and display
please help me?
Here i attached my files
i want to get data from json file and display
please help me?
0
Hi John,
I already replied to the same question in your other thread, however I am pasting my answer here too:
I believe the issue is caused by the data is not a valid JSON. For your convenience I modified the files and attached them back.
Regards,
Iliana Nikolova
Telerik
I already replied to the same question in your other thread, however I am pasting my answer here too:
I believe the issue is caused by the data is not a valid JSON. For your convenience I modified the files and attached them back.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!