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

redraw in real time.

8 Answers 313 Views
Charts
This is a migrated thread and some comments may be shown as answers.
alex
Top achievements
Rank 1
alex asked on 02 Jun 2016, 08:19 PM

Hi
I saw on your website Auto updatable line-chart.
Can you tell where to find it?

Chart beautifully redrawn in real time. (every second)

 

8 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 06 Jun 2016, 12:24 PM
Hello Alex,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sam
Top achievements
Rank 2
answered on 13 Apr 2018, 08:02 AM
http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/9655854-animation-when-changing-values
0
Joel
Top achievements
Rank 1
answered on 28 Aug 2019, 12:12 PM

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)?

0
Marin Bratanov
Telerik team
answered on 30 Aug 2019, 11:24 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Accepted
Joel
Top achievements
Rank 1
answered on 02 Sep 2019, 10:16 AM

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))
            )
0
Marin Bratanov
Telerik team
answered on 02 Sep 2019, 10:38 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
mike
Top achievements
Rank 1
answered on 27 May 2020, 12:57 PM

Hi Martin,

Can I get sample application of above real time line chart?

Thanks,

Mike

 

0
Tsvetomir
Telerik team
answered on 29 May 2020, 11:32 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
alex
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Sam
Top achievements
Rank 2
Joel
Top achievements
Rank 1
Marin Bratanov
Telerik team
mike
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or