• 0

Help with Javascript memory leak using Google Graphs


Question

I'm pretty new to Javascript, and I'm trying to write a web page that displays the utilisation of our servers. I have it all working fine, except for the fact that over time the page consumes more and more memory, until eventually the browser just gives up and displays an out of memory error. If I disable the code that displays the graphs (it still collates the data, just doesn't display the resultant graphs) then memory usage stays pretty flat and well under control (typically under 25,000K - all memory stats taken from Chromes Task Manager). Add the graphs back in and it starts around 40,000K, but grows and grows. I've seen it reach nearly 1GB after many hours. The page is intended as a dashboard display, running all the time on a Smart TV, with the figures updated every minute.

 

Here is the code that draws the graphs:

 

	function drawAChart(dataSource, chartHead, elementDIV){
		// // Take the data, and draw the actual graph
		dataSource.unshift(chartHead);
		var dataS = new google.visualization.arrayToDataTable(dataSource);
		var chartS = new google.visualization.ColumnChart(document.getElementById(elementDIV));
		chartS.draw(dataS, options);
		// Try and clean up to help the GC
		dataS = undefined;
		chartS = undefined;
		dataSource = undefined;
	}

When I comment out the lines relating to chartS then the memory usage stays low.

 

dataSource is an array, typically in the form [['Server name',<%age number 0-100>,<colour>], ...]

chartHead is typically ['Server','Useage', {role: 'style'}]

elementDIV is just the name of the DIV that the graph is displayed in.

 

The chart options are:

	var options = {
		height: 130,
		legend: {
			position: 'none'
		},
		chartArea: {
			left: 50,
			top: 10,
			width: '95%',
			height: '75%'
		},
		vAxis: {
			viewWindow: {
				min: 0,
				max: 100
			},
			ticks: [{v:0, f:"0%"}, {v:25, f:"25%"}, {v:50, f:"50%"}, {v:75, f:"75%"}, {v:100, f:"100%"}]
		},
		bar: {
			groupWidth: '95%'
		}
	};

 

I am using Google's charting routines from 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

which are initialised with:

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(doProcess);

I know I'm missing something, probably obvious to any seasoned Javascript devs, but I just can't figure it out. Hopefully I've given enough info for someone to point me in the right direction.

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
  • Posts

    • I'd say the first one failed to be as popular as Apple anticipated, but the easy adjustment here is to make fewer of them next time around. It would only be a "flop" if it isn't possible for Apple to recover the design and factory tooling costs given the number of units sold, which I doubt would be the case. It isn't like no one bought them; it just failed to become the new hot phone of the year.
    • You're right that it does not follow the plain meaning of the word, but in this context, it is a legal term defined in 49 U.S.C. Kind of how "wire fraud" laws apply even if a physical wire was not used. Given that it is codified in law, and it isn't just automotive journalists that don't understand evolving technology, I highly doubt congress would change a well understood term just because technology makes the term slightly less actuate.
    • This is exactly why I keep saying we are not ready for human free self-driving. These little "bugs" are may seem like random one-offs. There was also the Waymo that drove between police with drawn weapons and the suspect they were pointing them at. From a software perspective it is easy to understand how those extremely rare situations may not have been programed for, but that is the point. If AI needs to be told to watch out for every possible contingency, then it can never be successful. There will always be the possibility of a first encounter that the AI needs to understand to avoid.
    • TeraCopy 4.0 Final by Razvan Serea TeraCopy is a compact program designed to copy and move files at the maximum possible speed, also providing you with a lot of features. Copy files faster. TeraCopy uses dynamically adjusted buffers to reduce seek times. Asynchronous copy speeds up file transfer between two physical hard drives. Pause and resume transfers. Pause copy process at any time to free up system resources and continue with a single click. Error recovery. In case of copy error, TeraCopy will try several times and in the worse case just skips the file, not terminating the entire transfer. Interactive file list. TeraCopy shows failed file transfers and lets you fix the problem and recopy only problem files. Shell integration. TeraCopy can completely replace Explorer copy and move functions, allowing you work with files as usual. TeraCopy is free for non-commercial use only. For commercial use you need to buy a license. The paid version of the program includes the following features: Copy/move to your favorite folders. Save reports as HTML and CSV files. Select files with the same extension/folder. Remove the selected files from the copy queue. Download: TeraCopy 4.0 | 14.6MB (Freeware, paid upgrade available) View: TeraCopy Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Eurosoft10 earned a badge
      Week One Done
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • One Year In
      Skeet Campbell earned a badge
      One Year In
    • One Month Later
      Sharbel earned a badge
      One Month Later
    • First Post
      BizSAR earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      586
    2. 2
      +Edouard
      187
    3. 3
      Michael Scrip
      74
    4. 4
      PsYcHoKiLLa
      72
    5. 5
      neufuse
      69
  • Tell a friend

    Love Neowin? Tell a friend!