Kendo UI charts memory leak

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

    Posted 04 Apr 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
    2772 posts

    Posted 06 Apr 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. Kendo UI is VS 2017 Ready
  4. Yuri
    Yuri avatar
    4 posts
    Member since:
    Jun 2011

    Posted 15 Apr 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!
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

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

    Posted 21 Apr 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.

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

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

    Posted 28 Apr 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?

     

  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 02 May 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!
     
  10. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 24 Nov 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

  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 28 Nov 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.
Back to Top
Kendo UI is VS 2017 Ready