Cómo hacer un gráfico de sectores responsive con Google Charts

Un gráfico de sectores es un gráfico circular que se divide en pedazos que representan estadísticas. En aplicaciones web, los gráficos de sectores son muy útiles para mostrar datos estadísticos en porcentajes. Google Charts nos proporciona una manera sencilla de visualizar datos estadísticos en aplicaciones web. En este tutorial, te mostraremos cómo implementar y embeber un gráfico de sectores para mostrar datos demográficos en una página web utilizando Google Charts. También haremos que nuestro gráfico sea totalmente responsive para que se vea bien en todo tipo de resoluciones.

Crear gráfico de sectores con Google Charts

La Google Visualization API nos proporciona una vía rápida a la hora de crear gráficos de sectores en una página web. Puedes embeber un gráfico de sectores en cuestión de minutos utilizando Google Charts. El siguiente código crea un gráfico de sectores con Google Charts.

Codigo Javascript

Antes que nada, tienes que cargar la librería de Google Chart.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Utiliza el objeto chart con el callbacl drawChart. Debes especificar el id del div (piechart) en el método PieChart() cuando quieras mostrar el gráfico de sectores.

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      ['PHP', 79],
            ['JavaScript', 71],
            ['Swift', 68],
            ['SQL', 56],
            ['Java', 45],
            ['Perl', 45],
            ['Ruby', 35],
            ['Python', 30],
            ['AngularJS', 29],
            ['Node.js', 28],
            ['Objective-C', 19],
            ['C#', 17],
            ['C++', 15],
            ['C', 14]
    ]);

    var options = {
      title: 'Most Popular Programming Languages'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

Código HTML

Crea un elemento div con id (piechart) para mostrar el Google Chart en él.

<div id="piechart" style="width: 900px; height: 500px;"></div>

Hacer que el gráfico de sectores sea responsive

Si lo que quieres es que tu gráfico de sectores se muestre correctamente en todo tipo de resoluciones , debes hacer que sea responsive. Para hacer que nuestro gráfico sea responsive debemos modificar nuestro código HTML y Javascript.

El siguiente código crea un gráfico de sectores responsive con CSS.

Código Javascript

Añade un ancho (width) y un alto (height) en el método draw().

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      ['PHP', 79],
            ['JavaScript', 71],
            ['Swift', 68],
            ['SQL', 56],
            ['Java', 45],
            ['Perl', 45],
            ['Ruby', 35],
            ['Python', 30],
            ['AngularJS', 29],
            ['Node.js', 28],
            ['Objective-C', 19],
            ['C#', 17],
            ['C++', 15],
            ['C', 14]
    ]);

    var options = {
      title: 'Most Popular Programming Languages',
      width: '100%',
      height: '500px'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

Código HTML

Pon el div piechart en un div padre

<div id="chart_wrap">
    <div id="piechart"></div>
</div>

Código CSS

Añade el siguiente CSS para el div padre del div piechart y para el propio div piechart.

#chart_wrap {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

#piechart {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:500px;
}