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());
}
--
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 [email protected].
To post to this group, send email to [email protected].
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/62691e49-009a-42ab-9974-40207419b063%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
