You found a bug! We've classified it as EXTJS-6823 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    marioz is on a distinguished road

      0  

    Default Memory leak in charts

    Memory leak in charts


    Hi to all I tried the sample (gauge.html) attached to the exts js 4.1.1 release and added a timeout function to simualte live events. After few minutes the browser memory grows up to several hundred of megabytes. So I changed the sample in this way
    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Gauge Chart</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    
    
        <!-- GC -->
    
    
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
    Ext.require(['Ext.data.*']);
    
    
    Ext.onReady(function() {
        window.generateData = function(n, floor){
            var data = new Array(),
                p = (Math.random() *  11) + 1,
                i;
                
            floor = (!floor && floor !== 0)? 20 : floor;
    
    
    		data.push({
    			name: Ext.Date.monthNames[i % 12],
    			data1: Math.floor(Math.max((Math.random() * 100), floor)),
    			data2: Math.floor(Math.max((Math.random() * 100), floor)),
    			data3: Math.floor(Math.max((Math.random() * 100), floor))
    		});
    			
            return data;
        };
    
    
        window.store1 = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData()
        });
    	window.generateAllData = function(){
    	//	store1.removeAll(true);
    		store1.loadData(generateData(1));
    	//	generateData(1);
    		window.setTimeout("generateAllData()", 1000);
    	};
        Ext.create('Ext.Window', {
            width: 800,
            height: 250,
            minWidth: 650,
            minHeight: 225,
            title: 'Gauge Charts',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                   generateAllData();
                }
            }],
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'chart',
                style: 'background:#fff',
                animate: {
                    easing: 'elasticIn',
                    duration: 1000
                },
                store: store1,
                insetPadding: 25,
                flex: 1,
                axes: [{
                    type: 'gauge',
                    position: 'gauge',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: -10
                }],
                series: [{
                    type: 'gauge',
                    field: 'data1',
                    donut: false,
                    colorSet: ['#F49D10', '#ddd']
                }]
            }, {
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: store1,
                insetPadding: 25,
                flex: 1,
                axes: [{
                    type: 'gauge',
                    position: 'gauge',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: 7
                }],
                series: [{
                    type: 'gauge',
                    field: 'data2',
                    donut: 30,
                    colorSet: ['#82B525', '#ddd']
                }]
            }, {
                xtype: 'chart',
                style: 'background:#fff',
                animate: {
                    easing: 'bounceOut',
                    duration: 500
                },
                store: store1,
                insetPadding: 25,
                flex: 1,
                axes: [{
                    type: 'gauge',
                    position: 'gauge',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: 7
                }],
                series: [{
                    type: 'gauge',
                    field: 'data3',
                    donut: 80,
                    colorSet: ['#3AA8CB', '#ddd']
                }]
            }]
        }).show();
    	window.setTimeout("generateAllData()", 10000);    
    });
    	</script>
    </head>
        <body id="docbody">
            <h1>Gauge</h1>
            Displaying three custom gauge charts bound to different data stores with different configuration options and easings. Click on <b>Reload Data</b> to update the information. Click in <a href="Gauge.js">Gauge.js</a> to see the source code.
            <br>
        </body>
    </html>
    if I comment out the gauge part everything works fine (only array and store) but if I enable the charts the memory grows until the browser hangs (I tried IE, Firefox and chrome same results)
    In my opinion it's a bug in the gauge component, any help?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    marioz is on a distinguished road

      0  

    Default


    If you need I've got a lot of benchmark data
    Any chance to have it fixed soon ?

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    marioz is on a distinguished road

      0  

    Default


    any news????

  5. #5
    Sencha User
    Join Date
    Oct 2009
    Posts
    1
    Vote Rating
    0
    Neller is on a distinguished road

      0  

    Default


    We have also been experiencing memory drain problems with charts - most notably using IE8.

    Are there any updates on this issue?

  6. #6
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      0  

    Default


    We are also experiencing this problem.. any updates?
    Our app uses charts heavily and it becomes so slow, practically unusable..

    Any suggestions/tips on optimizing charts (besides limiting points etc)? Also, huge memory usage.. in Chrome, its reaching over 700MB.