Cómo dibujar el gráfico 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

El último paso es dibujar el gráfico. Primero, debes crear una instancia de la clase de gráfico que quieras usar y, luego, debes llamar a draw() en ella.

Crear una instancia de gráfico

Cada tipo de gráfico se basa en una clase diferente, que se indica en la documentación del gráfico. Por ejemplo, el gráfico circular se basa en la clase google.visualization.PieChart, el gráfico de barras se basa en la clase google.visualization.BarChart, y así sucesivamente. Tanto los gráficos circulares como los de barras se incluyen en el paquete corechart que cargaste al comienzo de este instructivo. Sin embargo, si deseas un mapa de árbol o un gráfico geográfico en tu página, debes cargar además los paquetes "mapa de árbol" o "mapa geográfico".

Los constructores de gráficos de Google toman un solo parámetro: una referencia al elemento DOM en el que se debe dibujar la visualización.

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

Dibuja tu gráfico

Después de preparar los datos y las opciones, estarás listo para dibujar tu gráfico.

Tu página debe tener un elemento HTML (por lo general, <div>) para incluir el gráfico. Debes pasar al gráfico una referencia a este elemento, así que asígnale un ID que puedas usar para recuperar una referencia con document.getElementById(). Todo lo que esté dentro de este elemento se reemplazará por el gráfico cuando se lo dibuje. Considera si debes dimensionar explícitamente este elemento <div>, pero, por ahora, especifica el tamaño del gráfico en el código HTML de <div>.

Cada gráfico admite un método draw() que toma dos valores: un objeto DataTable (o DataView) que contiene tus datos y un objeto de opciones de gráfico opcional. El objeto options no es obligatorio, y puedes ignorarlo o pasar un valor nulo para usar las opciones predeterminadas del gráfico.

Después de llamar a draw(), tu gráfico se dibujará en la página. Debes llamar al método draw() cada vez que cambies los datos o las opciones y desees actualizar el gráfico.

El método draw() es asíncrono, es decir, se muestra de inmediato, pero es posible que la instancia que muestra no esté disponible de inmediato. En muchos casos, esto es correcto; el gráfico se dibujará finalmente. Sin embargo, si deseas establecer o recuperar valores en un gráfico después de llamar a draw(), debes esperar a que arroje el evento ready, que indica que se propagó. En la siguiente página, hablaremos sobre la escucha de eventos.

Solución de problemas

Si tu gráfico no se muestra en la página, estos son algunos enfoques que pueden ayudarte a resolver los problemas:

  • Busca errores de ortografía. Recuerda que JavaScript es un lenguaje en el que se distinguen mayúsculas y minúsculas.
    • Usar un depurador de JavaScript En Firefox, puedes usar la consola de JavaScript, Venkman Debugger o el complemento de FireEye. En Chrome, puedes usar las herramientas para desarrolladores (Mayúsculas + Ctl + J).
  • Busca en el grupo de discusión sobre la API de visualización de Google. Si no encuentras una publicación que responda tu pregunta, publica la pregunta en el grupo junto con un vínculo a una página web que demuestre el problema.

 

 

 

Más información