All geek questions in one place

Increase Google Chart Permanent Memory

I redraw the chart based on new data every second and it works and looks great, but I notice that it increases memory, like using 1 MB every second. Any way to fix this? I notice that if I only have static diagrams, then the memory is stabilized, but as soon as I add a constant redraw (to update the data), the memory usage never stops.

At first I thought it was because every time I created a new instance of the diagram, so I change the code, so every time it redraws the same instance, but it did not help at all.

Does anyone know how to fix this? Do I need to reset the old chart first?

google.setOnLoadCallback(test); var chart; var chartOptions; var chartCreate; function test() { chart = new google.visualization.DataTable(); chart.addColumn('string', 'Lorem'); chart.addColumn('number', 'Ipsum'); chart.addRows([ ['', 0] ]); chartOptions = {}; chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv')); chartCreate.draw(chart, chartOptions); ]); } function test2() { chart.removeRows(0, 5); for (var i = 0; i < dataSpaceArray.length; ++i) { chart.addRow([dataTimeArray[i], dataSpaceArray[i], dataSpeedArray[i]]); } chartCreate.draw(chart, chartOptions); } setTimeout(test2,1000)
+4
source share
2 answers

I solved it with a global chart repository. Before you draw a chart, you need to check if a chart has been created. If not, create a new chart object call the clearChart () method again before drawing it. Like this:

 //Store all chart objects in a global array to avoid memory leak var charts = []; function drawChart(chartName, element, data, chartOptions) { if (charts[chartName] === undefined || charts[chartName] === null) { charts[chartName] = new google.visualization.LineChart(group); } else { charts[chartName].clearChart(); } charts[chartName].draw(dataTable, chartOptions); }
+6
source

Had the same problem, managed to fix it by adding a few lines to the Google clearChart () function.

 W.clearChart = function() { //this fixes the leak hv = {}; iv = {}; jv = {}; ... };

More details:

  • Here in the Google file I made the changes:

https://www.google.com/uds/api/visualization/1.0/4086f2e8fc632adc52e6d6795a5637a4/format+en,default,corechart.I.js

  • Download this file, make the changes mentioned above. In your code, add a script tag to download the file above from your web server and comment on the following line:

    //google.load('visualization ',' 1 ', {packages: [' corechart ']});

  • The memory will grow, but after a few minutes it will return down.

  • I use clearChart (), but if you do not want to clear the chart, then create your own function (e.g. memoryLeakFix ()) and call it periodically.

  • Here's the test page (1.js is the modified file from step 1). It basically creates a new chart and redraws every 100 ms. You will see that the memory goes up, but click on the “Stop” link to stop the redraw, and wait a few minutes and the memory will go down.

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script src="1.js" type="text/javascript"></script> <script type="text/javascript"> //init google charts // google.load('visualization', '1', { packages: ['corechart'] }); google.load('visualization', '1', { packages: ['table'] }); </script> </head> <body> <a href='#' onclick='stop()'>Stop</a> <div class='chart'></div> <script> var chart; var table; function createChart(container) { if(chart != undefined) chart.clearChart(); //init chart chart = new google.visualization.LineChart(container[0]); //init chart data if(table == undefined) { table = new google.visualization.DataTable(); table.addColumn('datetime', 'Time'); table.addColumn('number', 'Value'); var count = 0; //periodically add rows setInterval(function() { //add row table.addRows([ [new Date(), count++]]); }, 1000); } } //start redrawing var id = setInterval(function() { createChart($('.chart')); drawChart(); }, 100); //stop redrawing function stop() { clearInterval(id); } //draw chart function drawChart() { chart.draw(table, { curveType: "function", width: 250, height: 250, pointSize: 1, legend: { position: 'none' }, chartArea: { 'width': '90%', left: 50 }, }); } </script> </body> </html>
+3
source

Source: https://habr.com/ru/post/1502207/

More articles:


All Articles