Técnicas para dibujar gráficos

En esta página, se enumeran las diferentes formas de crear una instancia y dibujar un gráfico en la página. Cada método tiene sus ventajas y desventajas, como se indica 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 describe en el ejemplo de Hello Chart en esta documentación. Aquí encontrarás los pasos básicos:

  1. Carga el cargador de la biblioteca gstatic, la visualización de Google y las bibliotecas de gráficos
  2. Prepara los datos
  3. Prepara las opciones del gráfico
  4. Crea una instancia de clase de gráfico y pasa un controlador al elemento contenedor de la página.
  5. Opcionalmente, regístrese para recibir cualquier evento de gráfico. Si deseas llamar a métodos del gráfico, deberías escuchar el evento "ready".
  6. Llama a chart.draw() y pasa los datos y las opciones.

Ventajas:

  • Usted tiene el control total de cada paso del proceso.
  • Puedes registrarte para escuchar todos los eventos del gráfico.

Desventajas:

  • Detallado
  • Debes cargar de forma explícita todas las bibliotecas de gráficos requeridas.
  • Si envías consultas, debes implementar de forma manual la devolución de llamada, verificar si se realizó de forma correcta, extraer el DataTable que se mostró 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>

Wrapper de gráfico

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

Ventajas:

  • Mucho menos código
  • Carga todas las bibliotecas de gráficos requeridas por ti
  • Facilita la consulta de fuentes de datos mediante la creación del objeto Query y el control de la devolución de llamada por ti.
  • Pasa el ID del elemento del contenedor, que llamará a getElementByID por ti.
  • Los datos se pueden enviar en una variedad de formatos: como un arreglo de valores, como una string literal JSON o como un controlador DataTable.

Desventajas:

  • ChartWrapper actualmente propaga solo los eventos de selección, listos y de error. Para obtener otros eventos, debes obtener un handle para el gráfico unido y suscribirte a los eventos que allí se encuentren. Consulta la documentación de ChartWrapper para ver ejemplos.

Ejemplos:

Este es un ejemplo de un gráfico de columnas con datos construidos localmente especificados como un arreglo. No puedes especificar etiquetas de gráficos ni valores de fecha y hora con la sintaxis del arreglo, pero puedes crear un objeto DataTable con esos valores de forma manual 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 mediante 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>

Combinado con la carga automática, puede generar un código 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 del Editor de gráficos integrado en las 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 string y usarla como se describió anteriormente en ChartWrapper.

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

 

Dibujar()

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

Ventajas:

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

Desventajas:

  • No muestra un identificador 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