Memory Leak

Niklas Nässén

unread,

Aug 12, 2016, 5:18:54 AM8/12/16

to Google Visualization API

Hello,

My chart is working perfectly, grabbing data from msSQL server every second, but the browser memory usage increases by 1Mb per second, causing the browser to crash after some hours. I have been looking at old posts from 2012-2015 showing workarounds, but I have not been able to implement them since I don't understand the explanations of the workarounds suggested. For example:

if (chart) {
    chart.clearChart();
}

Is there a newer version of the API, then what do I need to change in my code to migrate? If not can someone help me in how to make the workarounds to work ?

I added some code below that shows the main parts I used. And attached a screenshot, and one of the php script I use.

Thanks Nick

<script type="text/javascript" src="https://www.google.com/jsapi?autoload= 
{'modules':[{'name':'visualization','version':'1.1','packages':
['corechart']}]}"></script>
<script type="text/javascript" >

function getData() {
        jQuery.ajax({
            url: 'ajax_working2.php',
            type: 'GET',
            dataType: 'json',
            mimeType: 'multipart/form-data',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data == "null") {
                 
                } else {
                    drawGraph(data);
                }
            },
            error: function(textStatus) {
                console.log(" error.");
            }
        });
 }

setInterval(function(){
 document.getElementById("Tiden").innerHTML =  new Date().toLocaleString(); 
 getData();
 },1000);

barChart.JPG

ENHET_D_GB03.php

Daniel LaLiberte

unread,

Aug 12, 2016, 9:28:38 AM8/12/16

to Google Visualization API

Hi Niklas,

The version you get with the way you are loading is fairly recent. No additional work on memory leaks has been done since then. But you should probably change your loading process to use the new loader by following the instructions here: https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

So I am curious to see the details of your code, data and environment, enough to reproduce the memory leak you are seeing. I can't use the php code you attached, but just looking at the code, you are regenerating the chart object every second, but not clearing the previous instance. If you instead create the chart only one time, and then just draw the chart each time you have new data, that will at least change things, and might avoid a memory leak in which each instance of the chart remains bound to the elements of the document generated to display the chart, if that is still happening. Alternatively, each time you create a new chart instance, be sure to explicitly clear and throw away the previous one. You would have to store the previous chart in a global variable, something like this:

var previousChart;

function drawChart() {

var chart = new google.visualization.SteppedAreaChart(...)

...

if (previousChart) {

previousChart.clearChart();

}

previousChart = chart;

}

The platform you are using (windows, mac, linux) and the version of your browser could make a difference too.

Hope this helps.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d6f8d4a6-aeea-452e-9d68-f11389c6460e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Niklas Nässén

unread,

Aug 17, 2016, 8:23:21 AM8/17/16

to Google Visualization API

<!doctype html >
<?php date_default_timezone_set('Europe/Stockholm');?>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="600" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>


  <script type="text/javascript" src="https://www.google.com/jsapi?autoload= {'modules':[{'name':'visualization','version':'1.1','packages': ['corechart']}]}"></script>
  <script type="text/javascript">


  google.setOnLoadCallback(getData);
  function getData() {
   jQuery.ajax({
    url: 'ajax_data.php',


    type: 'GET',
    dataType: 'json',
    mimeType: 'multipart/form-data',
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
     if (data == "null") {} else {
      drawGraph(data);
     }
    },
    error: function(textStatus) {


     console.log(" error getting data ");
    }
   });
  }
  function drawGraph(data) {
   for (var i = data.length; i > 0; i--) {
    data[i] = data[i - 1];
   }
   data[0] = ['Tid', 'Antal'];
   var chartData = google.visualization.arrayToDataTable(data);
   var view = new google.visualization.DataView(chartData);
   view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
   }]);
   var options = {
    'chartArea': {
     'width': '90%',
     'height': '80%'
    },
    width: 1750,
    height: 1000,
    legend: {
     position: 'none'
    },
    vAxis: {
     gridlines: {
      count: 8
     }
    },
    vAxis: {
     minValue: 0,
     maxValue: 45,
     ticks: [0, 10, 20, 30, 40],
     textStyle: {
      fontSize: 60
     }
    },
    hAxis: {
     textStyle: {
      fontSize: 60
     }
    },
    annotations: {
     textStyle: {
      fontSize: 60
     }
    }
   };
     
   var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
   chart.draw(view, options);


  }
  setInterval(function() {
   document.getElementById("Tiden").innerHTML = new Date().toLocaleString();
   getData();
  }, 1000);


  </script>
 </head>
 <body>
  <div class="chartWithOverlay">
   <div id="chart_div"></div>
   <div class="overlay">
    <div style="font-family:'Arial Black'; font-size: 50px;">GB03</div>
    <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .10em; margin-top:0px; margin-left:5px;">
     <div id="Tiden">
      <?=date('Y-m-d H:i:s', time());?>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Hello, Thank you very much for your answer. This is the current working code. I have been fighting many hours to correct the code, but I was not able to move the creation of the instance "var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
"  out of the drawGraph function, and I have reversed the changes.

Could you please guide me again a little more in detail? Thank you very much. 

//Nick

Daniel LaLiberte

unread,

Aug 17, 2016, 8:53:06 AM8/17/16

to Google Visualization API

Something like this:

<!doctype html >
<?php date_default_timezone_set('Europe/Stockholm');?>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="600" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload= {'modules':[{'name':'visualization','version':'1.1','packages': ['corechart']}]}"></script>
  <script type="text/javascript">

google.setOnLoadCallback(setupChart);

var chart; // Declare the variable out here.

function setupChart() {

// Set up the one instance of the chart now.

chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

// Repeatedly get new data and draw it.

setInterval(function() {
document.getElementById("Tiden").innerHTML = new Date().toLocaleString();
getData();
}, 1000);

}

function getData() {

...
};

// Maybe clear the chart each time, before drawing.

chart.clearChart();

chart.draw(view, options);
}

</script>
</head>
<body>
...
</body>
</html>

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2c3e511d-43a9-4e86-b345-af94d597aa83%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Niklas Nässén

unread,

Aug 17, 2016, 10:10:58 AM8/17/16

to Google Visualization API

Hi, I have tested your code. It is working. However its still Leaking, and I dont know why. I attach all code in a zip. Thank you for your support.

System Environment:

Clients: Tested on msWin7 iexplore 11 32 bit and Crome Version 52.0.2743.116 m 32 bit.

Server: msWindowsServer 2008. Apache+PHP via XAMPP

SQL: msSQLLightServer2008

Den fredag 12 augusti 2016 kl. 11:18:54 UTC+2 skrev Niklas Nässén:

LeakingCode.zip

Daniel LaLiberte

unread,

Aug 17, 2016, 10:14:40 AM8/17/16

to Google Visualization API

Could you please point me at your web page? The data could make a difference here as well, so it would save time just to view the actual page. Send me a private link of your page is not public.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e707fb43-fc59-4d22-888b-f1cad52b5888%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Niklas Nässen

unread,

Aug 17, 2016, 4:56:05 PM8/17/16

to google-visua...@googlegroups.com

I have sent a pm

Skickat från min iPhone

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMviZV2WpZvZxoK5OP0uqNR0-Qxn0KXhgBT9e%3DAMzygWg%40mail.gmail.com.

Niklas Nässén

unread,

Sep 8, 2016, 4:44:52 AM9/8/16

to Google Visualization API

Hello Daniel, I did not get any respond, but still I need your help to track this down. Hope you can find time soon. // N

Den onsdag 17 augusti 2016 kl. 22:56:05 UTC+2 skrev Niklas Nässén:

I have sent a pm

Skickat från min iPhone

17 aug. 2016 kl. 16:14 skrev 'Daniel LaLiberte' via Google Visualization API

Could you please point me at your web page? The data could make a difference here as well, so it would save time just to view the actual page. Send me a private link of your page is not public.

Reply all

Reply to author

Forward