Primeros pasos con la visualización de Google

Cargando y Ejecutando #

Actualmente, Google tiene dos formas de cargar la biblioteca JS para Google Visualization (también conocido como Google Charts), gstatic loader (https://www.gstatic.com/charts/loader.js) y jsapi (https://www.google.com/jsapi).

Se recomienda el cargador gstatic porque Google está pasando de jsapi al cargador gstatic. Ver referencia de transición

En cualquier caso, primero debe incluir uno de los cargadores con una etiqueta script, normalmente en el head de su documento, como este:

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

Una vez que haya incluido el cargador en su página web, puede usarlo para cargar los paquetes de biblioteca deseados llamando a la función cargar.

Para Loader.js

google.charts.load('current', {packages: ['corechart']});

Para JSAPI

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

Pero después de cargar los paquetes de la biblioteca, debe esperar a que terminen de cargarse antes de proceder a usarlos. La forma de esperar es configurar una devolución de llamada llamando a la función setOnLoadCallback.

Código de muestra (para el cargador gstatic):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>

HTML:

<div id="gender_chart"></div>

JSFIDDLE