An Example of a Google Bar Chart
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
JavaScript
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawDualX);
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: {
//height = 500,
title: 'Population of Largest U.S. Cities',
subtitle: 'Based on most recent and previous census data'
},
//height = 800,
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'}
}
},
// chartArea:{left:20,top:0,width:'50%',height:'98%'}
};
var material = new google.charts.Bar(document.getElementById('chart_div'));
material.draw(data, options);
}