Kendo charts rendering performance

[Ollie]

Hi,

I have a bar chart with 1000+ datapoints and the rendering is really slow in IE and Edge and it even make the browser to not respond, in other browsers (Chrome, FF), it is still slow but manageable. 

I searched for solutions for this and I came across this post: http://www.telerik.com/forums/chart-rendering-performance-dropped-(2015-q3-vs-2014-q3) about not including the categoryAxis labels in the rendering. I tried setting visible to 'false' and it seems to fix the slowness but I have to display the categoryAxis. The poster suggested to use 'step' but my categoryAxis are strings.

Any ideas or suggestions?

Ollie

Neovation

[Stefan]

Hello Ollie,

Even if the categories are strings, the labels.steps property will work as expected and it will render the labels based on the step:

http://dojo.telerik.com/iQaCe

I hope this will help to improve the performance.

Regards,
Stefan
Telerik by Progress

[Ollie]

Hi Stefan,

labels.step won't be feasible as a solution since I am required to display all the categoryAxis?

Any workarounds or suggestions for this? Or is there something in the pipeline that will improve the performance of chart rendering with regards to categoryAxis?

Thank you!

Ollie

Neovation

 

[Stefan]

Hello Ollie,

The specific optimisations can vary depending on the scenario and the requirements. Please have in mind that most of the time the performance can also vary depending on capabilities of the machine and the used browser

If sending us a runnable example is possible, we will be able to inspect it locally and check if any modifications can be made in order to improve the performance in this scenario. 

Regards,
Stefan
Telerik by Progress

[Ollie]

Hi,

http://dojo.telerik.com/@roldeguz/uSiYOK contains an example of what we're trying to do. The example will generate 1000 data points with two fields (Name and Total). In our implementation, Name is a date that is being generated from a date range where every date can possibly have values and can have over 1000+ data points.

I also added console logs for start time and end time to see how long would it take to render the chart. If you set visible to false in the categoryAxis config, you will see a significant decrease in rendering time. And I also suggest to run the code in IE or Edge.

Thank you and hopefully we can come up with a resolution as I have to present possible solutions to my team next week.

[Stefan]

Hello Ollie,

Thank you for providing a runnable example.

Indeed after testing the rendering in Internet explorer 11 takes around 30 seconds, but in Chrome it takes only 3 seconds on my end.

In general, the Internet explorer 11 is significantly slower browser when it comes to DOM manipulations, and the Kendo UI team does not have a full control over this.

In this scenario, the only other approach can be to render a smaller number of data points and then use pan and zoom to view all of the data points:

http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom

Regards,
Stefan
Telerik by Progress