Looking for google-visualization Answers? Try Ask4KnowledgeBase
Looking for google-visualization Keywords? Try Ask4Keywords

google-visualizationEmpezando con la visualización de google


Observaciones

La visualización de Google proporciona un marco flexible basado en javascript para crear una amplia variedad de gráficos interactivos que se pueden incrustar en las páginas web. Esos tipos de gráficos incluyen:

Los gráficos creados con Google Visualization pueden usarse datos de una variedad de fuentes, incluyendo JSON, Google Spreadsheets, así como matrices codificadas en Javascript.

La API de visualización de Google también le permite filtrar los datos, así como vincular varios gráficos a una única fuente de datos para crear tableros interactivos que muestran varias dimensiones de los mismos datos.

Versiones

Versión Sintaxis para seleccionar esta versión Fecha de lanzamiento
Corriente google.charts.load('current', {packages: ['corechart']}); 2016-02-23
44 google.charts.load('44', {packages: ['corechart']}); 2016-02-23
43 google.charts.load('43', {packages: ['corechart']}); 2015-10-02
42 google.charts.load('42', {packages: ['corechart']}); 2015-04-30
41 google.charts.load('41', {packages: ['corechart']}); 2015-02-23

Lista completa de versiones anteriores aquí .

Cargando y corriendo

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á haciendo la transición desde jsapi al cargador gstatic. Ver referencia de transición

En cualquier caso, primero debe incluir uno de los cargadores con una etiqueta de 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 una función de load .

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 utilizarlos. La forma de esperar es configurar una devolución de llamada llamando a una 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