Responsive Google Pie 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="chart_wrap"><div id="chart"></div></div>
<p id="canvas_size"></p>
CSS
body {
width:50%;
margin:10% auto;
background:#e6e6e6;
}
#chart_wrap {
border:1px solid gray;
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
}
#chart {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
JavaScript
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
legend:'YES',
width: '100%',
height: '100%',
pieSliceText: 'percentage',
'is3D':true,
colors: ['#0598d8', '#f97263','#059800','#ff3300','#0578d8','#0658d8',],
chartArea: {
left: "3%",
top: "3%",
height: "94%",
width: "94%"
}
};
var data = google.visualization.arrayToDataTable([
['Gender', 'Overall'],
['A', 50],
['B', 10],
['C', 10],
['D', 10],
['E', 10],
['F', 5],
['G', 5]
]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
}