Kendo UI charts memory leak

[Yuri]

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!

[T. Tsonev]

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

 

 

[Yuri]

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!

[T. Tsonev]

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

 

 

[Yuri]

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.

[T. Tsonev]

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

 

 

[Yuri]

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?

 

[T. Tsonev]

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

 

 

[Kay]

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

[T. Tsonev]

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

[Ondrej]

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.

[T. Tsonev]

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

[Ondrej]

Hello,

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

Ondrej

[T. Tsonev]

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