Chart loading animation stops while chart is rendered

[Dirk]

Hello

in my charts i show up the loading animation via
kendo.ui.progress($("#chart"), true);
which works fine.

Problem is, that the animation stops (progress gif is still shown but does not move)  as soon as data is delivered from server via JSON to the client and data processing starts at the browser, which takes a few seconds.
Is there a way to show an animation, which does not stop while the browser renders charts?

I guess this behavior is browser-related and not kendo ui specific.


TIA
Dirk

[Alexander Popov]

Hi Dirk,

This behavior could be observed when huge amounts of data are processed, since rendering a lot of points on the Chart is a very CPU intensive task. I also tried to reproduce this behavior here, but the progress animation stopped and immediately after that disappeared, then the data was displayed. Could you please check the example and let me know if I am doing something differently?

Regards,
Alexander Popov
Telerik

[Dirk]

Hello Alexander,

I added an alert to your example to see when data loading is finished an data processing in the browser starts:
...

dataBound: function(e){
        alert('Data loaded!!!');
        setTimeout(function(){kendo.ui.progress($("#chart"), false); });
      }

...
As far as I can see loading takes a long time (while animation works) but data processing at browser in your example is done very quickly (less than a second on my machine).
In my case the processing (rendering the chart in browser) takes a few seconds. To reproduce this behavior please use 3 series with 1000 data points each on a stacked area chart (that's what I'm doing).

You'll see that while data is loading the animation works (in my case data is loaded very quickly) and it stops as soon as rendering chart starts.

Regards
Dirk

[Alexander Popov]

Hello again Dirk,

Indeed, under these circumstances such behavior could be observed - as I mentioned in my previous reply rendering a lot of points is a very CPU intensive task. I am afraid however, that there is not much we can do about it due to JavaScript's single-threaded nature.

Regards,
Alexander Popov
Telerik

[Dirk]

Hello Alexander,

besides you answered my initial question I've got a nother question on this topic.

1. is it possible to interrupt the rendering (execution of appropriate JS code) of the chart? The idea is to let the user decide after a certain period of time if he likes to continue rendering the chart or not.

If I increase the amount of data that is passed to the chart from server (all aggregating etc is already done on the server) I'll run into the browsers alert 'long running script blah blah'), which really should not show up since it looks like an error message or something like that...

Investigating this issue I came up with the following questions/suggestions:

1. Would it be possible (for telerik) to do the rendering of chart in a JS web worker (JS background thread)
2. Is the rendering code cut into small pieces (common solution to avoid browser message mentioned above) using setTimeout()? Would this be possible?
3. Wouldn't 1.) or 2.) make the browser more responsive during chart rendering? E.g. :

• keep loading animation moving while chart is rendered
• letting the user decide to stop the script if it takes too long
• suppresssing browser message caused by long running script

Thanks in advance
Dirk

[Alexander Popov]

Hi Dirk,

Thank you for your feedback!  At this point there is no mechanism that could be used to interrupt the rendering, however I would recommend you to submit these suggestions at the KendoUI UserVoice portal, so we and other members of the community can evaluate, comment on and vote for them. Highly voted suggestions are often implemented in future Kendo UI releases.

Regards,
Alexander Popov
Telerik

[Jitendra]

Hi Dirk,

Did you get some resolution to that issue  , if yes can you please share it . I am facing the same issues  I need that  loading animation keeps moving while chart is rendered  completely , as in my case also the number of data points are too- many ,which is causing the browser to take some time to render chart  .

Thanks,
Jitendra
 

[Alexander Popov]

Hello Jitendra,

Have you checked this example?

Regards,
Alexander Popov
Telerik

 

 

[Dirk]

Hi Jitendra,

sorry we did not find any solution to this problem except not showing the loading animation...

As far as I know Telerik did not implement any of the suggested features (posted 17, January)

Maybe you'd like to join our suggestion at (add votes)
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/5440092-mechanism-to-interrupt-chart-rendering-keep-char

Regards
Dirk

[Dirk]

Hi Jitendra,

It's been a while but I think I've found a workaround.

I discovered that in my case the labels on category axis slowed rendering (by 10 times) of the chart that means rendering a chart with 10,000 points without labels is done (on my machine) within 2 seconds.

So my suggestion is to try to render your chart(s) without labels and if it speeds things really up use the step property (according to the amount of data I now use values of 6, 12 up to 720) of the labels to get better rendering performance and therefore avoid the frozen loading gif.

Hope that helps
Dirk