Responsive Google Bar Chart - JSFiddle - JSFiddle
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 {
border:1px solid gray;
position: relative;
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,
vAxis: {
title: ""
},
hAxis: {
title: "Общее время отрисовки (мс)"
},
colors: ['#6ea1e3', '#f0c457', '#9b7fe6', '#74b266', '#b3b3b3']
};
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Versions', 'HTML', 'JS', 'CSS', 'Media', 'Other'],
['Angular 2 JIT ', 35, 1507, 50, 9, 340],
['Angular 2 AOT', 25, 1003, 42, 6, 243],
['Angular 4 JIT', 27, 1369, 43, 10, 305],
['Angular 4 AOT', 15, 823, 26, 7, 275],
['Angular 5 JIT', 4, 718, 16, 1, 139],
['Angular 5 AOT', 1, 323, 17, 6, 138]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,options);
}