Responsive Google Pie Chart

by Geo George

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"><br><div id="chart"></div></div>
<p id="canvas_size"></p>

CSS

#chart_wrap {
    border:1px solid gray;
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

JavaScript

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(initChart);

$(window).on("throttledresize", function (event) {
    initChart();
});

function initChart() {
   var options = {
    title: 'report april',
    width:600,
    height:400,
    chartArea: {
            left: "3%",
            top: "13%",
            height: "94%",
            width: "94%"
        },
    //is3D: true,
    pieSliceText: 'none',
    legend: {
      position: 'labeled',
      textStyle: {
        fontName: 'monospace',
        fontSize: 9
      }
    },
    pieSliceTextStyle: {
      fontSize: 8
    },
    sliceVisibilityThreshold: 0,
    // pieResidueSliceLabel: 'Otros'
  };

    var data = google.visualization.arrayToDataTable([
        ['Gender', 'Overall'],
        ['Inversión', 67],
        ['Externo', 18],
        ['Reservas', 12],
        ['Corporativo', 8],
        ['Ranking', 5],
        ['Agua', 3],
        ['Nacionalización', 3],
        ['Medio ambiente', 1],
        ['Producción', 1],
    ]);
    drawChart(data, options)
}

function drawChart(data, options) {
    var chart = new google.visualization.PieChart(document.getElementById('chart'));
    chart.draw(data, options);
}