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 desees usar y, luego, debes llamar a draw() en ella.

Crea una instancia de tu gráfico

Cada tipo de gráfico se basa en una clase diferente que aparece 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. Los gráficos circulares y de barras se incluyen en el paquete corechart que cargó al comienzo de este instructivo. Sin embargo, si deseas tener un mapa de árbol o un gráfico geográfico en tu página, también debes cargar 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 dibuja la visualización.

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

Cómo dibujar su gráfico

Una vez que haya preparado los datos y las opciones, estará listo para dibujar su gráfico.

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

Cada gráfico admite un método draw() que toma dos valores: un objeto DataTable (o un objeto DataView) que contiene tus datos y un objeto opcional de opciones de gráfico. El objeto de opciones 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(), el 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 está bien; el gráfico se dibujará con el tiempo. Sin embargo, si deseas establecer o recuperar valores en un gráfico después de llamar a draw(), debes esperar a que se active el evento de preparación, lo que indica que se propagó. Analizaremos cómo detectar eventos en la página siguiente.

Solución de problemas

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

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

 

 

 

Más información