Memory leak in charts

**marioz** · 18 Jul 2012 7:33 AM

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?

**mitchellsimoens** · 20 Jul 2012 8:34 AM

Thanks for the report.

**marioz** · 23 Jul 2012 9:19 AM

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

**marioz** · 18 Oct 2012 3:13 AM

any news????

**Neller** · 25 Oct 2012 4:59 PM

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

Are there any updates on this issue?

**hitman01** · 27 Nov 2012 12:31 PM

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.

Memory leak in charts

Thread Tools

Search Thread

Display

Memory leak in charts

Memory leak in charts