En esta página, se describen los conceptos básicos del uso de la API de gráficos para crear gráficos.
Política de uso de gráficos de Google
No hay límite para la cantidad de llamadas diarias que puedes realizar a la API de Google Chart. Sin embargo, nos reservamos el derecho de bloquear cualquier uso que consideremos abusivo.
Descripción general
Ver gráficos en esta documentación
Todas las imágenes de gráficos en esta documentación se generan en vivo con la API de gráficos. Para ver la URL de cualquier imagen, haz lo siguiente:
- Si usas Firefox, haz clic con el botón derecho y selecciona "Ver imagen" o "Propiedades".
- Si usas Internet Explorer, haz clic con el botón derecho y selecciona "Propiedades".
Para facilitar la lectura de una URL, este documento suele mostrarla en varias líneas. Cuando usas la API de Google Chart, debes proporcionar una URL en una sola línea.
La API de Google Chart muestra una imagen de gráfico en respuesta a una solicitud GET o POST de URL. La API puede generar muchos tipos de gráficos, desde gráficos circulares o de líneas hasta códigos QR y fórmulas. Toda la información sobre el gráfico que deseas, como los datos, el tamaño, los colores y las etiquetas, forma parte de la URL. (Para las solicitudes POST, es un poco diferente, pero no te preocupes por eso ahora).
Para crear un gráfico lo más simple posible, solo debes especificar el tipo, los datos y el tamaño del gráfico. Puedes escribir esta URL directamente en tu navegador o apuntar a ella con una etiqueta <img> en tu página web. Por ejemplo, sigue este enlace para obtener un gráfico circular:
https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World
El vínculo anterior es un ejemplo de una URL básica de la API de Chart. Todas las URLs del gráfico tienen el siguiente formato:
https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...
Todas las URLs comienzan con https://chart.googleapis.com/chart? seguido de los parámetros que especifican los datos y el aspecto del gráfico. Los parámetros son pares name=value, separados por un carácter de Y comercial (&), y pueden estar en cualquier orden, después del ?. Todos los gráficos requieren, como mínimo, los siguientes parámetros: cht (tipo de gráfico), chd (datos) y chs (tamaño de gráfico). Sin embargo, hay muchos más parámetros para opciones adicionales y puedes especificar tantos parámetros adicionales como se admita en el gráfico.
Examinemos la URL anterior con más detalle:
| URL | Componentes |
|---|---|
|
|
Copia y pega esta URL en tu navegador y realiza algunos cambios: agrega valores adicionales a los datos (no olvides agregar una coma antes de cada valor de datos nuevo). Agrega etiquetas nuevas (coloca una marca | antes de cada valor nuevo). Agrandar el gráfico.
Cómo crear un gráfico
A continuación, te mostramos cómo crear un gráfico de imágenes:
- Elige un tipo de gráfico. Consulta la galería para ver una lista de gráficos; el tipo de gráfico se especifica mediante el parámetro
cht. Haz un boceto de todos los componentes que deseas que tenga tu gráfico (ejes, etiquetas, fondos, etc.) y, si es necesario, define las dimensiones en píxeles de los distintos componentes (tamaño total del gráfico, tamaño de leyenda, etc.). Debes leer la documentación con atención para tu tipo de gráfico primero; de lo contrario, es posible que tengas una experiencia frustrante. - Crea los datos de tus gráficos y dales formato. Los datos se especifican con el parámetro
chd. Deberás decidir qué formato usar para tus datos:- Elige un formato de datos. Puedes usar un formato de texto simple para los datos de tu gráfico, que es fácil de leer, pero requiere más espacio para enviar, o puedes usar uno de los tipos de codificación, que es más pequeño para enviar, pero restringe el rango de valores que puedes enviar.
- Decida si sus datos se deben adaptar para que se ajusten a su gráfico. Los diferentes formatos admiten distintos rangos de valores. Te recomendamos escalar tus datos para que abarquen el rango completo de valores que permite tu formato y que las diferencias sean más evidentes. Puedes hacerlo escalando tus datos para que se ajusten al formato de datos que usas o puedes usar el formato de texto con escalamiento personalizado.
- Si es necesario, codifica tus datos. Si elegiste un formato codificado, ofrecemos JavaScript para ayudarte con otros tipos de codificación.
- Especifica el tamaño del gráfico. El tamaño del gráfico se especifica con el parámetro
chs. Consulta la documentación para conocer el formato y los valores máximos. - Agregue parámetros adicionales. En la documentación de cada gráfico, se enumeran los parámetros opcionales disponibles. Las opciones típicas incluyen etiquetas, títulos y
colores. Ten en cuenta que todo el texto de las etiquetas o los títulos debe estar codificado en UTF-8. Ten en cuenta que muchos
parámetros te permiten ingresar varios valores. Por ejemplo, el parámetro
chmte permite colocar una forma en un solo dato de un gráfico. Puedes colocar formas en varios datos con el parámetrochm, pero para hacerlo, no especifiques el parámetrochmvarias veces en tu URL (por ejemplo, WRONG:chm=square&chm=circle&chm=triangle). En cambio, los parámetros que toman varios valores usan un delimitador, como una coma o una barra vertical, entre varios valores en el mismo parámetro. Parachm, es una barra, por lo que tendríamos algo similar a lo siguiente: RIGHT:chm=square|circle|triangle. Consulta los detalles de cada parámetro para aprender a especificar varios parámetros. - Crea tu string de URL. La URL comienza con
https://chart.googleapis.com/chart?, seguida de todos los parámetros obligatorios (cht,chd,chs) y opcionales. Nota: Si usas tu URL en una etiqueta<img>, tendrás que cambiar todos los caracteres&a&en el vínculo. Ejemplo:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />. - Usa GET o POST para obtener tu imagen. GET es cuando escribes la URL directamente en tu navegador o la usas en una etiqueta
<img>. Sin embargo, las URLs tienen una longitud máxima de 2,000, por lo que, si tienes más datos que estos o si sientes gusto por la sangre, te recomendamos que uses POST, tal como se describe aquí. - Crea regiones en las que se puede hacer clic. De manera opcional, puedes crear un mapa de imágenes para el gráfico, que te permitirá agregar hipervínculos o hacer clic en elementos a elementos específicos del gráfico. Consulta Creación de un mapa de imágenes del gráfico para obtener más detalles.
Glosario de términos de los gráficos
Estos son algunos términos importantes que usamos en esta documentación:
- Serie
- Es un conjunto de datos relacionado en un gráfico.
Lo que constituye una serie depende del tipo de gráfico: en un gráfico de líneas, una serie es una sola línea; en un gráfico circular, cada entrada es una porción y todas las secciones juntas son una serie. En un gráfico de barras, una serie está compuesta por todas las barras del mismo conjunto de datos. Las diferentes series se agrupan una al lado de la otra o se apilan una encima de la otra, según el tipo de gráfico de barras. En el siguiente gráfico, se muestra un gráfico de barras agrupadas con dos series, una en azul oscuro y otra en celeste:
- Etiquetas de ejes
- Valores numéricos o de texto a lo largo de cada eje. En el gráfico anterior, serían las etiquetas “Ene”, “Feb”, “Mar”,
“0”, “50”, “100”.
Componentes del gráfico
Estos son algunos de los componentes de un gráfico:
- Área del gráfico
- El área donde se muestra el arte de la serie. Consulta la barra lateral "Componentes del gráfico" para obtener más detalles.
- Leyenda
- Es un área pequeña del gráfico que describe la serie. En el gráfico anterior, es la sección que enumera "Gatos" y "Perros".
- Parámetro
- Es un par clave=valor que se usa en la URL. Por ejemplo:
chxt=x, en el quechxtes el nombre del parámetro yxes el valor del parámetro. - GET y POST
- Dos métodos para enviar la URL del gráfico Para realizar la solicitud GET, puedes escribir una URL en el navegador o convertirla en la fuente de una etiqueta
<img>. Las solicitudes POST son más complejas, pero pueden incluir muchos más datos. El motivo principal para usar POST en lugar de GET es que una solicitud POST puede consumir muchos más datos que una solicitud GET (16,000 caracteres frente a 2,000). POST se trata aquí. - Carácter de barra vertical
- El carácter
|, que se suele usar como un delimitador de valor de parámetro, es decir, un carácter para dividir varios valores. La coma y el signo de unión (&) también se usan como delimitadores en la URL del gráfico. - Gráficos compuestos
- Gráfico que combina dos tipos de gráficos diferentes: por ejemplo, un gráfico de barras con una línea o un gráfico de líneas con marcadores de velas. Consulta Gráficos compuestos.
Optimizaciones
Ahora que aprendiste los conceptos básicos para crear un gráfico, te mostramos algunas optimizaciones que puedes usar.
Usa POST
Las URLs están limitadas a una longitud de 2,000, por lo que, si tu gráfico tiene más datos, deberás usar POST en lugar de GET, como se describe aquí. La operación GET se produce cuando escribes la URL del gráfico en la barra de URL del navegador o la usas como fuente de un elemento <img> en una página web. POST requiere programación adicional en otro lenguaje, como PHP o PERL.
Crear gráficos en JavaScript
Puedes usar la API de visualización de Google para crear gráficos de imágenes por ti. La API de visualización de Google es una API basada en JavaScript que te proporciona herramientas para crear, filtrar y manipular datos, o bien para consultar datos en las Hojas de cálculo de Google u otros sitios. Puedes usar la API de visualización para crear tus datos y, luego, hacer que llame a la API de Image Charts para procesar el gráfico en la página. Para obtener más información, consulta la documentación del gráfico de imágenes genérico o busca en la Galería de visualización los gráficos de Google marcados (imagen).