Make Google Chart Gauge responsive

google-visualization, javascript, responsive-design

Solution

The charts will not resize automatically. You must set up an event handler that calls `chart.draw(data, options);` on resize:

function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Happiness', 40]
    ]);

    var options = {
        redFrom: 0,
        redTo: 40,
        yellowFrom:40,
        yellowTo: 70,
        greenFrom: 70,
        greenTo: 100,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('test'));
    chart.draw(data, options);

    function resizeHandler () {
        chart.draw(data, options);
    }
    if (window.addEventListener) {
        window.addEventListener('resize', resizeHandler, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onresize', resizeHandler);
    }
}

Setting `height` and `width` to 100% in the options won't do anything for you. You will need to set those in CSS for your container div:

#test {
    height: 100%;
    width: 100%;
}

Keep in mind a few things: setting height to 100% doesn't do anything unless the parent element has a specific height; also, the height and width of a Gauge are determined by the smaller of the dimensions. So if you increase the size of the screen without specifying the height of the container `#test` (or it's parent container), the likely outcome is that the chart won't change size.

Problem

I would like to create a Google Gauge charts which should be web-responsive. I heard about setting the width to '100%' should work out, but it actually doesn't make any changes. Following you can see my code. ``` <script type='text/javascript'> google.load('visualization', '1', {packages:['gauge']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Happiness', 40], ]); var options = { width: '100%', height: '100%', redFrom: 0, redTo: 40, yellowFrom:40, yellowTo: 70, greenFrom: 70, greenTo: 100, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('test')); chart.draw(data, options); } </script> ``` Please see my example .Example Test Does anyone know how to make it web-responsive?

Original source