google.visualization.events.addListener reports ready before fully loaded

[Martin Thorburn]

I have multiple charts on a single webpage. Once all the charts are fully loaded I want to hide all charts so I can present the user with a menu of charts allowing them to click any chart to view, one at a time.

However the last called chart is not fully loaded before the event listener calls the hide function reulting in a blank view when the related menu item is clicked.

The js is not even that complicated !!

function pageDisplay() {
		$('.leaderboard').css('display','none');
	};
	
	
	google.charts.load("current", {packages:["corechart"]});
	
	
	
	google.charts.setOnLoadCallback(drawChart);
	
	

	function drawChart() {
	  	  
		var data1 = google.visualization.arrayToDataTable([['strokes', 'scores'],['Blobs',91],['Bogies',57],['Pars',76],['Birdies',52],['Eagles',12],['Albatross',0],]);
	
		var options1 = {
			title: 'Nett Scores Round 1',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
			
		var chart1 = new google.visualization.PieChart(document.getElementById('chart_div1'));
		chart1.draw(data1, options1);
	
		var dataAll = google.visualization.arrayToDataTable([['strokes', 'scores'], ['Blobs', 410],['Bogey', 297],['Par', 399],['Birdie', 230],['Eagle', 32],['Albatros', 0]]);		
	
		var optionsAll = {
			title: 'Nett Scores Round ALL Rounds',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
	
		var chartAll = new google.visualization.PieChart(document.getElementById('chart_divall'));
		chartAll.draw(dataAll, optionsAll);	  
		var data2 = google.visualization.arrayToDataTable([['strokes', 'scores'],['Blobs',153],['Bogies',131],['Pars',165],['Birdies',114],['Eagles',13],['Albatross',0],]);
	
		var options2 = {
			title: 'Nett Scores Round 2',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
			
		var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
		chart2.draw(data2, options2);
	
		var dataAll = google.visualization.arrayToDataTable([['strokes', 'scores'], ['Blobs', 410],['Bogey', 297],['Par', 399],['Birdie', 230],['Eagle', 32],['Albatros', 0]]);		
	
		var optionsAll = {
			title: 'Nett Scores Round ALL Rounds',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
	
		var chartAll = new google.visualization.PieChart(document.getElementById('chart_divall'));
		chartAll.draw(dataAll, optionsAll);	  
		var data3 = google.visualization.arrayToDataTable([['strokes', 'scores'],['Blobs',166],['Bogies',109],['Pars',158],['Birdies',64],['Eagles',7],['Albatross',0],]);
	
		var options3 = {
			title: 'Nett Scores Round 3',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
			
		var chart3 = new google.visualization.PieChart(document.getElementById('chart_div3'));
		chart3.draw(data3, options3);
	
		var dataAll = google.visualization.arrayToDataTable([['strokes', 'scores'], ['Blobs', 410],['Bogey', 297],['Par', 399],['Birdie', 230],['Eagle', 32],['Albatros', 0]]);		
	
		var optionsAll = {
			title: 'Nett Scores Round ALL Rounds',
			width: 600,
			height:450,
			legend : 'labeled',
			pieSliceText: 'none',
			is3D: true,
			chartArea:{width:'100%',height:'75%'}
		};
	
		var chartAll = new google.visualization.PieChart(document.getElementById('chart_divall'));
		chartAll.draw(dataAll, optionsAll);	var dataPar = google.visualization.arrayToDataTable([
  ['Par', 'Round 1', 'Round 2', 'Total'],['Par 3s', 1.41, 1.11, 1.27],['Par 4s', 1.38, 1.18, 1.28],['Par 5s', 1.69, 1, 1.37]]);
		
		var optionsPar = {
		  title : 'Millhouse Cup Average Points Per PAR',
		  vAxis: {title: 'Average Points'},
		  hAxis: {title: '18 hole rounds only'},
		  seriesType: 'bars',
		  chartArea:{width:'60%',height:'40%'},
		  series: {2: {type: 'line'}}
		};
		
		var chartPar = new google.visualization.ComboChart(document.getElementById('chart_parave'));
		chartPar.draw(dataPar, optionsPar);
		
		
		var dataAve = google.visualization.arrayToDataTable([
  ['Hole', 'Round 1', 'Round 2', 'Total'],['1', 1.13, 0.71, 0.93],['2', 1.56, 1.14, 1.37],['3', 1.41, 1.11, 1.27],['4', 1.38, 1.18, 1.28],['5', 1.69, 1, 1.37],['6', 1.28, 1.71, 1.48],['7', 1.34, 1.71, 1.52],['8', 1.28, 1.29, 1.28],['9', 1.41, 0.96, 1.2],['10', 1.5, 1.82, 1.65],['11', 2.19, 1.57, 1.9],['12', 1.91, 1.5, 1.72],['13', 1.63, 1.11, 1.38],['14', 1.16, 1.32, 1.23],['15', 1.94, 1.79, 1.87],['16', 1.5, 1.39, 1.45],['17', 0.97, 0.82, 0.9],['18', 1.47, 0.89, 1.2]]);	
		
		var optionsAve = {
		  title : 'Millhouse Cup Average Points Per Hole',
		  vAxis: {title: 'Average Points'},
		  hAxis: {title: 'Hole \n (18 hole rounds only)'},
		  seriesType: 'bars',
		  chartArea:{width:'60%',height:'40%'},
		  series: {2: {type: 'line'}}
		};
		
		var chartAve = new google.visualization.ComboChart(document.getElementById('chart_average'));
		chartAve.draw(dataAve, optionsAve);
		
		google.visualization.events.addListener(chartAve, 'select', pageDisplay());	
	
		
	}