This comes up every now and then such as
https://stackoverflow.com/questions/21170147/google-charts-switching-between-line-and-column-charts
and
https://stackoverflow.com/questions/35380994/google-charts-switch-between-table-and-chart-view
As you're only changing the value of isStacked you need only add an event
handler to a button to change a variable then redraw the barchart. Here's
the code to do what you want::
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart'],
callback: initChart
});
function initChart() {
var button;
var chart;
var data;
var showChart = 'Show as Absolute';
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
chart = new google.visualization.ChartWrapper({
containerId: 'chart_div',
dataTable: data
});
button = document.getElementById('btnSwitch');
button.addEventListener('click', switchChart, false);
// draw initial chart
switchChart();
function switchChart() {
button.value = showChart;
var barType;
showChart = (showChart === 'Show as Absolute') ? 'Show as Percent' :
'Show as Absolute';
if (showChart.indexOf("Absolute") >-1){
barType = true;
}
else {
barType = "percent";
}
drawChart(barType);
}
function drawChart(barType) {
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
isStacked: barType,
};
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
</script>
<input type="button" id="btnSwitch" />
<div id="chart_div"></div>
You should be able to see where to put your own options. There's a working
example at http://brisray.com/test/nevada.htm
You can use almost any element to do things like this, a dropdown list for
example.
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/bcafb4d0-0e0a-4171-a61d-bfe05697ac62%40googlegroups.com.
