I need to hide or unhide some Google charts based on a button push. The code (shown below) works very well but I can't figure out the problem with labels. When I use the button to "Switch Graph" the pie chart disappears as it should and the Bar chart appears. The issue is that no matter how I configure the 2nd graph, none of the Labels show. Can anyone help?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<title>Alternating Graphs Test</title>
</head>
<body>
<button onclick="switchgraph(1)">
Switch Graph
</button><br>
<button onclick="switchgraph(2)">
Switch Back
</button><br>
<div id="piechart"></div>
<div hidden id="barchart"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChartdefault);
function drawChartdefault() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Pet care', 3],
['Eat', 2],
['Coffee Break', 1],
['Watch TV', 3],
['Sleep', 7]
]);
var options = {
title: 'Test Graph for test question xxx',
titleTextStyle: {
color: 'blue', // color 'red' or '#cc00cc'
fontName: 'Times', // 'Times New Roman'
fontSize: 16, // 12, 18
bold: true, // true or false
italic: false // true of false
},
is3D: true,
sliceVisibilityThreshold: .1,
legend: {position: 'top', textStyle: {fontSize: 14}, maxLines: 3, alignment: 'start'},
tooltip: { trigger: 'focus', text: 'both' },
width: 400,
height: 500,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
} // end function
//
google.charts.setOnLoadCallback(drawChartSeries);
function drawChartSeries() {
var data = google.visualization.arrayToDataTable([
['City', '2020 Population', '2010 Population', '2000 Population'],
['New York City, NY', 10600234, 8175000, 8008000],
['Los Angeles, CA', 5043000, 3792000, 3694000],
['Chicago, IL', 3045000, 2695000, 2896000],
['Houston, TX', 2010122, 2099000, 1953000],
['Philadelphia, PA', 149000, 1526000, 1517000]
]);
var options = {
title: 'Population of Largest U.S. Cities',
titleTextStyle: {
color: 'Blue', // color 'red' or '#cc00cc'
fontName: 'Times', // 'Times New Roman'
fontSize: 16, // 12, 18
bold: true, // true or false
italic: false // true of false
},
chartArea:{left:"10%",width:'50%',height:'50%'},
// width: 900,
// height: 900,
legend: {position: 'bottom', textStyle: {fontSize: 10}, maxLines: 5, alignment: 'start'},
vAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
// bar: { groupWidth: '75%' }
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
//
function switchgraph(n) {
var bar = document.getElementById("barchart");
var pie = document.getElementById("piechart");
if (n === 1) {
bar.removeAttribute("hidden");
pie.setAttribute("hidden", "hidden");
} else {
pie.removeAttribute("hidden");
bar.setAttribute("hidden", "hidden");
}
} // end function
</script>
</body>
</html>
I have tried configuring the chart size all ways possible. Changing the Chartarea width and height has virtually no effect except to grow or shrink the charts. The labels simply never show and the legend is incomplete or missing.
Note that if I show the Bar chart by default and hide the Pie chart, the Pie chart will be missing the labels after switching, so it seems it's always the 2nd chart that is a problem. If I display both charts to begin with, all Labels show correctly! Help!
this happens when the chart is drawn in a hidden container.
because it cannot properly calculate the size of the chart elements.
instead, wait until the container is shown before drawing the chart.
I've removed the following statement
google.charts.setOnLoadCallback(drawChartSeries);
and added both drawChartdefault and drawChartSeries to the switch routine
function switchgraph(n) {
var bar = document.getElementById("barchart");
var pie = document.getElementById("piechart");
if (n === 1) {
bar.removeAttribute("hidden");
pie.setAttribute("hidden", "hidden");
drawChartSeries();
} else {
pie.removeAttribute("hidden");
bar.setAttribute("hidden", "hidden");
drawChartdefault();
}
see following working snippet...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<title>Alternating Graphs Test</title>
</head>
<body>
<button onclick="switchgraph(1)">
Switch Graph
</button><br>
<button onclick="switchgraph(2)">
Switch Back
</button><br>
<div id="piechart"></div>
<div hidden id="barchart"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChartdefault);
function drawChartdefault() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Pet care', 3],
['Eat', 2],
['Coffee Break', 1],
['Watch TV', 3],
['Sleep', 7]
]);
var options = {
title: 'Test Graph for test question xxx',
titleTextStyle: {
color: 'blue', // color 'red' or '#cc00cc'
fontName: 'Times', // 'Times New Roman'
fontSize: 16, // 12, 18
bold: true, // true or false
italic: false // true of false
},
is3D: true,
sliceVisibilityThreshold: .1,
legend: {position: 'top', textStyle: {fontSize: 14}, maxLines: 3, alignment: 'start'},
tooltip: { trigger: 'focus', text: 'both' },
width: 400,
height: 500,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
} // end function
//
function drawChartSeries() {
var data = google.visualization.arrayToDataTable([
['City', '2020 Population', '2010 Population', '2000 Population'],
['New York City, NY', 10600234, 8175000, 8008000],
['Los Angeles, CA', 5043000, 3792000, 3694000],
['Chicago, IL', 3045000, 2695000, 2896000],
['Houston, TX', 2010122, 2099000, 1953000],
['Philadelphia, PA', 149000, 1526000, 1517000]
]);
var options = {
title: 'Population of Largest U.S. Cities',
titleTextStyle: {
color: 'Blue', // color 'red' or '#cc00cc'
fontName: 'Times', // 'Times New Roman'
fontSize: 16, // 12, 18
bold: true, // true or false
italic: false // true of false
},
chartArea:{left:"10%",width:'50%',height:'50%'},
// width: 900,
// height: 900,
legend: {position: 'bottom', textStyle: {fontSize: 10}, maxLines: 5, alignment: 'start'},
vAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
// bar: { groupWidth: '75%' }
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
//
function switchgraph(n) {
var bar = document.getElementById("barchart");
var pie = document.getElementById("piechart");
if (n === 1) {
bar.removeAttribute("hidden");
pie.setAttribute("hidden", "hidden");
drawChartSeries();
} else {
pie.removeAttribute("hidden");
bar.setAttribute("hidden", "hidden");
drawChartdefault();
}
} // end function
</script>
</body>
</html>