[visualization-api] Memory Leak

[Niklas Nässén]

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);

['Daniel LaLiberte' via 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.

Post by Niklas Nässén
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
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=
['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);
--
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
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
<https://groups.google.com/d/msgid/google-visualization-api/d6f8d4a6-aeea-452e-9d68-f11389c6460e%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
***@Google.com <***@google.com> 5CC, Cambridge MA

[Niklas Nässén]

<!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

Post by Niklas Nässén
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
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=
['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);

['Daniel LaLiberte' via 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() {
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 = {
...
};

// Maybe clear the chart each time, before drawing.
chart.clearChart();

chart.draw(view, options);
}

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

Post by Niklas Nässén
<!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/
['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

Post by Niklas Nässén
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
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=
['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);
--

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
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
<https://groups.google.com/d/msgid/google-visualization-api/2c3e511d-43a9-4e86-b345-af94d597aa83%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
***@Google.com <***@google.com> 5CC, Cambridge MA

[Niklas Nässén]

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

Post by Niklas Nässén
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
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=
['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);

['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.

Post by Niklas Nässén
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.
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

Post by Niklas Nässén
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
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=
['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);
--

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
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
<https://groups.google.com/d/msgid/google-visualization-api/e707fb43-fc59-4d22-888b-f1cad52b5888%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
***@Google.com <***@google.com> 5CC, Cambridge MA

[Niklas Nässen]

I have sent a pm

Skickat från min iPhone

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.

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.
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

Post by Niklas Nässén
Hello,
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=
['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);

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.

--
Daniel LaLiberte
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
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.
For more options, visit https://groups.google.com/d/optout.

[Niklas Nässén]

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

Post by Niklas Nässen
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.

Post by Niklas Nässén
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.
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

Post by Niklas Nässén
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
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=
['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);
--