Técnicas para dibujar gráficos

En esta página, se enumeran las diferentes formas en las que puedes crear instancias de un gráfico y dibujarlo en la página. Cada método tiene ventajas y desventajas, que se enumeran a continuación.

Contenido

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Más información

chart.draw()

Este es el método básico que se aborda en el ejemplo de Hello Chart! en esta documentación. Aquí encontrarás los pasos básicos:

  1. Carga el cargador de bibliotecas gstatic, las visualizaciones de Google y las bibliotecas de gráficos
  2. Prepara los datos
  3. Prepara las opciones de gráficos
  4. Crea una instancia de la clase de gráfico y pasa un controlador al elemento del contenedor de la página.
  5. Opcionalmente, regístrate para recibir los eventos del gráfico. Si quieres llamar a los métodos del gráfico, debes escuchar el evento "listo".
  6. Llama a chart.draw() y pasa los datos y las opciones.

Ventajas:

  • Tienes control total sobre cada paso del proceso.
  • Puedes registrarte para escuchar todos los eventos que muestra el gráfico.

Desventajas:

  • Verboso
  • Debes cargar de forma explícita todas las bibliotecas de gráficos requeridas.
  • Si envías consultas, debes implementar manualmente la devolución de llamada, verificar si se realizó correctamente, extraer el DataTable que se muestra y pasarlo al gráfico.

Ejemplo:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

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

ChartWrapper

ChartWrapper es una clase de conveniencia que controla la carga de todas las bibliotecas de gráficos adecuadas por ti y también simplifica el envío de consultas a las fuentes de datos de herramientas de gráficos.

Ventajas:

  • Mucho menos código
  • Carga todas las bibliotecas de gráficos requeridas por ti
  • Facilita mucho las consultas de fuentes de datos, ya que crea el objeto Query y administra la devolución de llamada por ti.
  • Pasa el ID del elemento del contenedor, y llamará a getElementByID por ti.
  • Los datos se pueden enviar en diversos formatos: como un array de valores, como una cadena literal JSON o como un controlador DataTable.

Desventajas:

  • Actualmente, ChartWrapper solo propaga los eventos de selección, preparación y error. Para obtener otros eventos, debes obtener un identificador para el gráfico unido y suscribirte a los eventos allí. Consulta la documentación de ChartWrapper para ver ejemplos.

Ejemplos:

Este es un ejemplo de un gráfico de columnas con datos construidos localmente que se especifican como un array. No puedes especificar etiquetas de gráfico ni valores de fecha y hora con la sintaxis de array, pero puedes crear de forma manual un objeto DataTable con esos valores y pasarlo a la propiedad dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Este es un ejemplo de un gráfico de líneas que obtiene sus datos realizando una consulta en una Hoja de cálculo de Google. Ten en cuenta que el código no necesita controlar la devolución de llamada.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Junto con la carga automática, esto puede hacer que el código sea muy compacto:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Cómo usar el Editor de gráficos con ChartWrapper

Puedes usar el diálogo Editor de gráficos integrado en Hojas de cálculo de Google para diseñar un gráfico y, luego, solicitar la string ChartWrapper serializada que representa el gráfico. Luego, puedes copiar y pegar esta cadena y usarla como se describió anteriormente en ChartWrapper.

Puedes incorporar un editor de gráficos en tu propia página y exponer métodos para que los usuarios se conecten a otras fuentes de datos y muestren la cadena ChartWrapper. Consulta la documentación de referencia de ChartEditor para obtener más información.

 

DrawChart()

DrawChart es un método estático global que une un ChartWrapper.

Ventajas:

  • Igual que ChartWrapper, pero un poco más corta de usar.

Desventajas:

  • No muestra un handle para el wrapper, por lo que no puedes controlar ningún evento.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Más información