An Example of a Google Bar Chart
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div1"></div>
<input type="button" id="btnReload" value="Load First"></input>
<input type="button" id="btnReload1" value="Load Second"></input>
JavaScript
google.charts.load('41', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(loadAll);
function loadAll(){
drawDualX();
drawDualY();
}
$('#btnReload').click(function(){
$('#chart_div').show();
$('#chart_div1').hide();
drawDualX();
})
$('#btnReload1').click(function(){
$('#chart_div1').show();
$('#chart_div').hide();
drawDualY();
})
function drawDualX() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
]);
var options = {
chart: {
title: 'Population of Largest U.S. Cities',
subtitle: 'Based on most recent and previous census data'
},
hAxis: {
title: 'Total Population'
},
vAxis: {
title: 'City'
},
bars: 'horizontal',
series: {
0: {axis: '2010'},
1: {axis: '2000'}
},
axes: {
x: {
2010: {label: '2010 Population (in millions)', side: 'top'},
2000: {label: '2000 Population'}
}
}
};
var material = new google.charts.Bar(document.getElementById('chart_div'));
material.draw(data, options);
}
function drawDualY() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
]);
var options = {
chart: {
title: 'Population of Largest U.S. Cities',
subtitle: 'Based on most recent and previous census data'
},
hAxis: {
title: 'Total Population'
},
vAxis: {
title: 'City'
},
...