Kendo UI charts memory leak

14 posts, 0 answers
  1. Yuri
    Yuri avatar
    4 posts
    Member since:
    Jun 2011

    Posted 04 Apr 2016 Link to this post

    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!
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 06 Apr 2016 Link to this post

    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!
     
  3. Yuri
    Yuri avatar
    4 posts
    Member since:
    Jun 2011

    Posted 15 Apr 2016 in reply to T. Tsonev Link to this post

    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!
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 19 Apr 2016 Link to this post

    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!
     
  5. Yuri
    Yuri avatar
    4 posts
    Member since:
    Jun 2011

    Posted 21 Apr 2016 in reply to T. Tsonev Link to this post

    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.

  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 25 Apr 2016 Link to this post

    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!
     
  7. Yuri
    Yuri avatar
    4 posts
    Member since:
    Jun 2011

    Posted 28 Apr 2016 in reply to T. Tsonev Link to this post

    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?

     

  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 02 May 2016 Link to this post

    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!
     
  9. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 24 Nov 2016 in reply to T. Tsonev Link to this post

    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

  10. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 28 Nov 2016 Link to this post

    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.
  11. Ondrej
    Ondrej avatar
    2 posts
    Member since:
    Sep 2017

    Posted 10 Oct Link to this post

    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.

  12. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 12 Oct Link to this post

    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.
  13. Ondrej
    Ondrej avatar
    2 posts
    Member since:
    Sep 2017

    Posted 13 Oct Link to this post

    Hello,

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

    Ondrej

  14. T. Tsonev
    Admin
    T. Tsonev avatar
    2794 posts

    Posted 17 Oct Link to this post

    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.
Back to Top