8 Answers, 1 is accepted
Thank you for considering Kendo UI.
I have modified the following Chart demo:
http://demos.telerik.com/kendo-ui/chart-api/benchmark
To update the data and redraw the Chart every second:
http://dojo.telerik.com/OHixI
If this does not help, please send us more details about where exactly on our site you have seen the described chart, so we can point you to a similar demo, or the source code, used to create it.
Regards,
Dimiter Topalov
Telerik
Hi,
I am working on a ASP.Net Core MVC project & rather new in this area.
I am getting a JSON response from a HttpGet "action" in a "controller".
The script that i refer from Realtime data from server causes the chart to redraw itself & flicker on every update.
setInterval(function () {
$.ajax({
url: '@Url.Action("OEEPlots2", "MachineDetails")',
type: "GET",
datatype: "application/json",
success: function (response) {
var chart = $("#oeeChart").data("kendoChart");
if (chart !== undefined) {
chartData = chartData.concat(response);
chart.dataSource.data(chartData);
if (chartData.length > 40) {
chartData.splice(0, 4);
}
}
}
});
}, 1000);
Can you share how to add the response to the chart's dataSource (& splicing some nodes) so that i can achieve the same result as what is shown in your sample (without flicker)?
Hello Joel,
Could you take a look through the following dojo sample that my colleague Dimitar made based off our demo: http://dojo.telerik.com/OHixI? It shows how the data source of the chart gets modified, and how calling kendo.animationFrame() is used to create a loop if you pass a callback to it. This function is a shortcut to the requestAnimationFrame() method of the browsers that facilitates animations. The demo keeps using the same amount of data but changes values only, and has the chart animations disabled (transitions:false in its config). It also uses the canvas rendering for better performance. I suggest you try applying those changes to see if it helps. Ultimately, the chart needs to be redrawn in order for the new values to come up, so disabling the animations is the first step to make this faster.
Regards,
Marin Bratanov
Progress Telerik
Hi Marin,
It works after adding Transitions(false) & RenderAs(RenderingMode.Canvas).
There is no change in the script.
@(Html.Kendo().Chart(Model.DataPoints)
.Name("oeeChart")
.Title("OEE Chart")
.RenderAs(RenderingMode.Canvas)
.Transitions(false)
.DataSource(ds => ds
.Read(read => read.Action("OEEPlots", "MachineDetails",
new { productionLineName = Model.ProductionLineName, machineGuid = Model.MachineGuid}))
.Group(group => group.Add(model => model.Order))
)
Thanks for updating the thread, Joel, I am marking your post as an answer to help guide other people with a similar question.
Regards,
Marin Bratanov
Progress Telerik
Hi Martin,
Can I get sample application of above real time line chart?
Thanks,
Mike
Hi Alex,
The example with the real-time updates is present in the Dojo sample shared above:
http://dojo.telerik.com/AHAbEyur
However, if you would like to perform actual real-time updates from a SignalR data source, I recommend taking a look at the following example:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.signalr
Regards,
Tsvetomir
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.