Se usó la API de Cloud Translation para traducir esta página.

Carga las bibliotecas

En esta página, se muestra cómo cargar las bibliotecas de Google Chart.

Carga de bibliotecas básicas

Con pocas excepciones, todas las páginas web con Gráficos de Google deben incluir las siguientes líneas en el <head> de la página web:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

La primera línea de este ejemplo carga el cargador en sí. Solo puedes cargar el cargador una vez, sin importar cuántos gráficos planeas dibujar. Después de cargar el cargador, puedes llamar a la función google.charts.load una o más veces para cargar paquetes de tipos de gráficos específicos.

El primer argumento de google.charts.load es el nombre o número de la versión, como una cadena. Si especificas 'current', se cargará la versión oficial más reciente de Google Charts. Si quieres probar la versión candidata para la próxima versión, usa 'upcoming'. En general, habrá muy poca diferencia entre los dos, y serán completamente idénticos, excepto cuando haya una nueva versión en curso. Un motivo común para usar upcoming es que deseas probar un nuevo tipo de gráfico o una función que Google lanzará en los próximos meses. (anunciamos las próximas versiones en nuestro foro y te recomendamos que las pruebes cuando se anuncien para asegurarte de que los cambios en tus gráficos sean aceptables).

En el ejemplo anterior, se supone que deseas mostrar un corechart (barra, columna, línea, área, área escalonada, burbuja, gráfico circular, rosquilla, combinado, velas, histograma, dispersión). Si quieres un tipo de gráfico diferente o adicional, reemplaza o agrega el nombre de paquete apropiado para corechart anterior (p.ej., {packages: ['corechart', 'table', 'sankey']}. Puedes encontrar el nombre del paquete en la sección "Cargando" de la página de documentación de cada gráfico.

En este ejemplo, también se supone que tienes una función de JavaScript llamada drawChart definida en algún lugar de tu página web. Puedes nombrar esa función como desees, pero asegúrate de que sea única a nivel global y de que esté definida antes de hacer referencia a ella en tu llamada a google.charts.setOnLoadCallback.

Nota: Las versiones anteriores de Google Charts usaban código que difiere del anterior para cargar las bibliotecas. A fin de actualizar los gráficos existentes para usar el código nuevo, consulta Actualiza el código del cargador de la biblioteca.

Este es un ejemplo completo para dibujar un gráfico circular con la técnica de carga básica:

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

Cómo cargar detalles

Primero, debes cargar el cargador en sí, que se hace en una etiqueta script independiente con src="https://www.gstatic.com/charts/loader.js". Esta etiqueta puede estar en el head o body del documento, o bien puede insertarse de forma dinámica en el documento mientras se carga o después de que se completa la carga.

<script src="https://www.gstatic.com/charts/loader.js"></script>

Después de cargar el cargador, puedes llamar a google.charts.load. Puedes llamarlo en una etiqueta script en el head o body del documento, y puedes llamarlo mientras el documento aún se está cargando o en cualquier momento después de que termine de cargarse.

A partir de la versión 45, puedes llamar a google.charts.load más de una vez con el objetivo de cargar paquetes adicionales, aunque es más seguro evitar hacerlo. Debes proporcionar el mismo número de versión y la misma configuración de idioma cada vez.

Ahora puedes usar el parámetro de URL autoload de la JSAPI anterior, pero el valor de este parámetro debe usar codificación de URL y formato JSON estrictos. En JavaScript, puedes codificar jsonObject con este código: encodeURIComponent(JSON.stringify(jsonObject)).

Limitaciones

Si usas versiones anteriores a la 45, existen algunas limitaciones menores, pero importantes, en la forma en que cargas Gráficos de Google:

Solo puedes llamar a google.charts.load una vez. Sin embargo, puedes enumerar todos los paquetes que necesitarás en una sola llamada, por lo que no es necesario realizar llamadas separadas.
Si usas un ChartWrapper, debes cargar explícitamente todos los paquetes que necesitarás, en lugar de confiar en que ChartWrapper los cargará automáticamente por ti.
Para Geochart y Map Chart, debes cargar el cargador de bibliotecas anterior y el nuevo. Recuerda que esto es solo para las versiones anteriores a la 45 y no debes hacerlo para las versiones posteriores.
```
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
```

Carga el nombre o número de la versión

El primer argumento de tu llamada a google.charts.load es el nombre o número de la versión. Por el momento, solo hay dos nombres de versiones especiales y varias versiones inmovilizadas.

actual: Esta opción es para la versión oficial más reciente, que cambia cada vez que lanzamos una versión nueva. Lo ideal es que esta versión esté bien probada y no contenga errores, pero es posible que desees especificar una versión sin actualizar en particular una vez que estés seguro de que funciona.
futura: Esto es para la próxima versión, mientras aún se está probando y antes de que se convierta en la versión actual oficial. Prueba esta versión con regularidad para saber lo antes posible si hay algún problema que debas solucionar antes de que esta versión se convierta en el lanzamiento oficial.

Cuando lanzamos nuevas versiones de Gráficos de Google, algunos de los cambios son grandes, como tipos de gráficos completamente nuevos. Otros cambios son pequeños, como las mejoras en la apariencia o el comportamiento de los gráficos existentes.

Muchos creadores de gráficos de Google ajustan el aspecto de sus gráficos hasta que logran exactamente lo que quieren. Es posible que algunos creadores se sientan más cómodos sabiendo que sus rankings nunca cambiarán, independientemente de las mejoras que realicemos en el futuro. Para esos usuarios, admitimos Gráficos de Google fijos.

Las versiones de gráficos inmovilizadas se identifican por número y se describen en nuestras Versiones oficiales. Para cargar una versión sin actualizar, reemplaza current o upcoming en tu llamada a google.charts.load por el número de versión sin actualizar:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

Esperamos que las versiones sin actualizar permanezcan disponibles de forma indefinida, aunque es posible que retiremos las versiones sin actualizar que tengan problemas de seguridad. Por lo general, no brindaremos asistencia para las versiones inmovilizadas, excepto para sugerirte que actualices a una versión más reciente.

Carga la configuración

El segundo parámetro de tu llamada a google.charts.load es un objeto para especificar la configuración. Las siguientes propiedades son compatibles con las opciones de configuración.

paquetes

Un array de cero o más paquetes. Cada paquete que se cargue tendrá el código requerido para admitir un conjunto de funciones, por lo general, un tipo de gráfico. Los paquetes que debes cargar se indican en la documentación de cada tipo de gráfico. Puedes evitar especificar ningún paquete si usas un ChartWrapper para cargar automáticamente lo que se necesitará.

idioma

Es el código del idioma o la configuración regional que se debe usar para personalizar el texto que podría formar parte del gráfico. Consulta Configuraciones regionales para obtener más información.

callback

Una función a la que se llamará una vez que se carguen los paquetes. Como alternativa, puedes especificar esta función llamando a google.charts.setOnLoadCallback, como se muestra en el ejemplo anterior. Consulta Devolución de llamada para obtener más detalles.

  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });

mapsApiKey

(v45) Este parámetro de configuración te permite especificar una clave que puedes usar con Geochart y Map Chart. Te recomendamos que hagas esto en lugar de usar el comportamiento predeterminado, que puede provocar una limitación ocasional del servicio para tus usuarios. Obtén información sobre cómo configurar tu propia clave para usar el servicio "Google Maps JavaScript API" aquí: Obtén una clave o autenticación. El código se verá de la siguiente manera:

  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });

safeMode

(v47) Cuando se establece como verdadero, todos los gráficos y la información sobre la herramienta que generan HTML a partir de datos proporcionados por el usuario lo limpiarán mediante la eliminación de los elementos y atributos no seguros. Como alternativa (v49 y versiones posteriores), la biblioteca se puede cargar en el modo seguro con un atajo que acepta la misma configuración de carga, pero siempre carga la versión "actual":

  google.charts.safeLoad({ packages: ['corechart'] });

Configuraciones regionales

Las configuraciones regionales se usan para personalizar el texto de un país o idioma, lo que afecta el formato de valores como monedas, fechas y números.

De forma predeterminada, Google Charts se carga con la configuración regional "en". Puedes anular esta configuración predeterminada si especificas de forma explícita una configuración regional en la configuración de carga.

Para cargar un gráfico con formato para una configuración regional específica, usa la configuración language de la siguiente manera:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

Sigue este vínculo para ver un ejemplo en vivo.

Devolución de llamada

Antes de poder usar cualquiera de los paquetes cargados por google.charts.load, debes esperar a que finalice la carga. No basta con esperar a que el documento termine de cargarse. Como esta carga puede tardar un poco en completarse, debes registrar una función de devolución de llamada. Existen tres maneras de hacerlo. Especifica una configuración de callback en tu llamada a google.charts.load, llama a setOnLoadCallback pasando una función como argumento o usa la promesa que muestra la llamada a google.charts.load.

Ten en cuenta que, para todos estos métodos, debes proporcionar una definición de función, en lugar de llamar a la función. La definición de función que proporciones puede ser una función con nombre (por lo que solo debes asignarle su nombre) o una función anónima. Cuando se terminen de cargar los paquetes, se llamará a esta función de devolución de llamada sin argumentos. El cargador también esperará a que el documento termine de cargarse antes de llamar a la devolución de llamada.

Si deseas dibujar más de un gráfico, puedes registrar más de una función de devolución de llamada con setOnLoadCallback o combinarlas en una sola función. Obtén más información para dibujar varios gráficos en una página.

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

Devolución de llamada a través de una promesa

Otra forma de registrar tu devolución de llamada es usar la promesa que se muestra de la llamada google.charts.load. Para ello, agrega una llamada al método then() con código que se vea como el siguiente.

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

Uno de los beneficios de usar la promesa es que puedes dibujar más gráficos fácilmente con solo encadenar más llamadas a .then(anotherFunction). El uso de la promesa también vincula la devolución de llamada a los paquetes específicos necesarios para esa devolución de llamada, lo cual es importante si deseas cargar más paquetes con otra llamada a google.charts.load().

Actualiza el código del cargador de bibliotecas

Las versiones anteriores de Google Charts usaban un código diferente para cargar las bibliotecas. En la siguiente tabla, se muestra el código antiguo del cargador de bibliotecas y el nuevo.

Código anterior del cargador de bibliotecas
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); </script>
Nuevo código de cargador de bibliotecas
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); </script>

Código anterior del cargador de bibliotecas

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>

Nuevo código de cargador de bibliotecas

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>

Para actualizar tus gráficos existentes, puedes reemplazar el código antiguo del cargador de bibliotecas con el código nuevo. Sin embargo, ten en cuenta las limitaciones sobre la carga de bibliotecas que se describieron anteriormente.

A continuación: Cómo preparar los datos