Responsive Google Bar Chart
HTML
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgithub.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<div id="visualization_wrap">
<div id="visualization"></div>
</div>
CSS
body {
width:80%;
margin:10% auto;
background:#e6e6e6;
}
#visualization_wrap {
padding-bottom: 80%;
height: 0;
overflow:hidden;
}
#visualization {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
JavaScript
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawVisualization);
$(window).on("throttledresize", function (event) {
drawVisualization();
});
function drawVisualization() {
var options = {
title: "",
width: '100%',
height: '100%',
axisTitlesPosition: 'out',
'isStacked': true,
pieSliceText: 'percentage',
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "25%",
top: "3%",
height: "80%",
width: "100%"
},
vAxis: {
title: ""
},
hAxis: {
title: "Total Results"
}
};
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['State', 'Male', 'Female'],
['Alaska', 500, 400],
['Alabama', 300, 200],
['California', 1500, 650],
['Colorado', 1200, 470],
['Illinois', 1000, 700],
['Tennesse', 500, 400],
['Texas', 1300, 500],
['Utah', 176, 55],
['Vermont', 310, 240],
['Wyoming', 500, 400]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,options);
}