CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Maik Silber
Maik Silber

Reputation: 71

Google Chart high RAM in browser

I have see that using google chart creates much RAM usage.

I must say that i have code somethink with javascript which lets the browser load every 7 seconds a new chart, it does give the Google Draw Chart function new data from a new file and the chart gets drawed, but this seems to create to much RAM usage on my PC. Does somebody know a trick how to avoid this? I think maybe the browser is saving all data from before in a cache or so, if that would not be done then maybe the RAM dont go so high after few minutes? Because now it does go higher and higher with few minutes it reach 100% and the browser stop working.

Here is my current code:

function drawVisualization() 
{

//-- From this textfile the chart gets info which is the new symbol chart
var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
var Setting = JSON.parse(Textinhalt);

 Symbol=Setting.Selection[0].symbol;
 Timeframe=Setting.Selection[0].timeframe;
 Broker=Setting.Selection[0].broker;

//--Now the new data is been getting from php response file
var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;

var jsonData = $.ajax({
    url: fileurl,
    contentType:"application/json",
    dataType:"json",
    async: false
    }).responseText;
var array=$.parseJSON(jsonData);

//--Now new data have been saved into array and will be draw
var data =google.visualization.arrayToDataTable(array,true);

var options = { 
    legend: 'none'
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
     chart.draw(data, options);

}


//--If this function is clicked the google charts get refreshed every 7 seconds and i did see that my browser creates more and more RAM usuage till it goes over 100% and stops working
function PlayCharts()
{
 drawVisualization();  
 setTimeout(PlaySignals, 7000);
}

Upvotes: 1

Views: 105

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

part of the problem could be that you are creating a new chart every time
instead of drawing the same chart with new data

recommend changing the scope a little,
move the chart variables outside of drawVisualization
but you have to wait until google is loaded until creating
not sure what you're page on load function looks like

also, async: false on $.ajax is deprecated

recommend setup similar to following... 

// move declarations outside of drawVisualization
var chart;
var options = {
  legend: 'none'
};

// load google charts
google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  // create chart
  chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

  // move other on page load functions here
  // google.charts.load can be used instead of --> $(document).ready
});

function drawVisualization() {
  //-- From this textfile the chart gets info which is the new symbol chart
  var Textinhalt = $.ajax({ url: "Chartsettings.txt", contentType:"application/json", dataType:"json", async: false }).responseText;
  var Setting = JSON.parse(Textinhalt);

  Symbol=Setting.Selection[0].symbol;
  Timeframe=Setting.Selection[0].timeframe;
  Broker=Setting.Selection[0].broker;

  //--Now the new data is been getting from php response file
  var fileurl = "getData.php?symbol="+Symbol+"&timeframe="+Timeframe+"&broker="+Broker;

  $.ajax({
    url: fileurl,
    contentType: 'application/json',
    dataType: 'json'
  }).done(function (jsonData) {
    var array = $.parseJSON(jsonData);

    //--Now new data have been saved into array and will be draw
    var data = google.visualization.arrayToDataTable(array, true);

    // draw same chart
    chart.draw(data, options);
  });
}

function PlayCharts() {
  drawVisualization();
  setTimeout(PlaySignals, 7000);
}

Upvotes: 1

Related Questions