This is a migrated thread and some comments may be shown as answers.
Kendo UI charts memory leak
13 Answers 59 Views
This is a migrated thread and some comments may be shown as answers.
Yuri
Top achievements
Rank 1
Yuri asked on 04 Apr 2016, 09:54 AM

Hello,

We have a problem with Kendo UI charts in Internet Explorer 11 ( may be problem there is in another version IE too, we used only IE 11 to check it). It is memory leak.  When we change dataSource (setDataSource method) or when we do refresh / redraw, memory is not released.
Our datasource is large (10-15k points) and we need  to refresh data every 10 seconds. It means that after 2 hours IE has size 1gb memory and allocated memory continues to grow.
You can see this leak at your tutorial page 
http://demos.telerik.com/kendo-ui/scatter-charts/local-data-binding  . Just Increase datasource to one thousand items and try to set data with setDataSource method at least 10 times. Every call setDataSource  will increase memory to 3-5 mb.
Are there another way to update data in chart without this problem? Can you help us in this trouble?

Thank you in advance!

13 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 06 Apr 2016, 09:00 AM
Hi,

I investigated the issue and I can see that the memory usage is increasing rapidly. That said, the JavaScript heap memory doesn't seem to increase by much which indicates that we're not leaking JavaScript objects. One possible explanation is that the browser is allocating a lot of memory for internal structures due to the heavy DOM content.

My recommendation is to switch to Canvas rendering, which is much more lightweight in terms of DOM nodes created.
    renderAs: "canvas"

Let me know if this helps.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yuri
Top achievements
Rank 1
answered on 15 Apr 2016, 01:16 PM
Hello,

Thank you for your recommendations, we have tried "Canvas rendering" approach but it did not help. Unfortunately the problem still persists and memory consumption grows up as before.

Could you provide us some other solution please?

Thank you!
0
T. Tsonev
Telerik team
answered on 19 Apr 2016, 01:41 PM
Hello,

What happens if you let your application work for prolonged time periods? Does it crash or does it seem to level off at a given memory usage level?

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yuri
Top achievements
Rank 1
answered on 21 Apr 2016, 08:30 AM

Hello,

If app works for prolonged time period, browser stops to respond and there is no possibility to use our Web site anymore. This is critical problem because the customer wants to see our Web application running all the time, it is kind of monitoring system.

Thank you.

0
T. Tsonev
Telerik team
answered on 25 Apr 2016, 07:17 AM
Hello,

I have one more suggestion for you to try out. You can try binding the series to two-dimensional arrays as follows:

var seriesData = [
  [1, 1], [2, 2], [3, 3] ...
];

$("#chart").kendoChart({
    series: [{
        type: "scatter",
        data: seriesData
    }],
    ...
});

If you need additional metadata you can still objects and fields, as with the data source binding:

var seriesData = [
  { x: 1, y: 1, prop: "A" }, ...
];

$("#chart").kendoChart({
    series: [{
        type: "scatter",
        data: seriesData,
        xField: "x",
        yField: "y"
    }],
    ...
});

This skips the data source binding, saving a bit of overhead of wrapping the data items in observable objects.

I'll add this to the Performance Tips section in the documentation.

Let me know 

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Yuri
Top achievements
Rank 1
answered on 28 Apr 2016, 08:31 AM

Hi,

 

thank you but It will not help us, because we do not use datasource in our solution. 
We update data through setOptions method.

this.chart.setOptions({ series: this.series.data });

 

we tried dataSource as well, no difference. any other ideas?

 

0
T. Tsonev
Telerik team
answered on 02 May 2016, 07:54 AM
Hi,

Okay, in this case can you try recreating the chart instead of calling setDataSource?
Sometimes a memory leak can be caused by a small variation in the usage.

Ideally, a runnable sample would allow us to try out more ideas and to get a detailed memory use profile.

Regards,
T. Tsonev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Kay
Top achievements
Rank 1
answered on 25 Nov 2016, 02:15 AM

Hi,

I have the same problem with a treeList. I repeatedly call setDataSource because I want to lazy load more nodes as users expand the treelist.  Please have a look at my snippet here.

Is there a solution to this problem yet?

 

Thanks and Regards,

Sunil

0
T. Tsonev
Telerik team
answered on 28 Nov 2016, 04:58 PM
Hi,

Is this ticket related to the issue in discussed in ticket 1073415? If so, feel free to continue the discussion there.

Other than that I can confirm that calling setDataSource leaks memory. I didn't have a chance to run a full investigation though.
How about setting the data only as a workaround? Is replacing the data source necessary in the original scenario?

        scope.treeControl.reloadData = function () {
          scope.treeList.dataSource.data(scope.treeData);
          // Instead of
          // scope.treeList.setDataSource(scope.getDataSource());
        }

I hope this helps.

Regards,
T. Tsonev
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Ondrej
Top achievements
Rank 1
answered on 10 Oct 2017, 01:55 PM

Hello,

I would like to know, if this problem was fixed or is beeing fixed. I have the same problem. I have nested chart inside grid and every 20 seconds I do datasource refresh via ajax. The memory is building up until there's no free memory and the browser crashes (after several hours). Version I use is 2017.2.621.545.

Thank you.

0
T. Tsonev
Telerik team
answered on 12 Oct 2017, 07:16 AM
Hello Ondrej,

Can you share a running sample, e.g. in the Dojo that reproduces the problem? Each case is slightly different and we need as much details as possible - chart configuration, code snippets, browser version - the more, the better chance of pinpointing the problem.

Regards,
T. Tsonev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ondrej
Top achievements
Rank 1
answered on 13 Oct 2017, 08:42 AM

Hello,

I am sending you running sample. It is ASP.NET MVC solution.
http://www.uschovna.cz/sk/zasilka/QU2WT6MAZLAUC5L4-HNL/

Ondrej

0
T. Tsonev
Telerik team
answered on 17 Oct 2017, 05:28 PM
Hi,

Apologies for the delay.

I've noticed that the graphs hash stores references to datasource instances. These don't appear to be cleaned up at any point. 

The most logical place to do that would be in destroyGraphs function.

I hope this helps.

Regards,
T. Tsonev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Yuri
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Yuri
Top achievements
Rank 1
Kay
Top achievements
Rank 1
Ondrej
Top achievements
Rank 1
Share this question
or