Importante: La sección de gráficos de imágenes de las herramientas de gráficos de Google se dio de baja oficialmente a partir del 20 de abril de 2012. Seguirá funcionando de acuerdo con nuestra política de baja.
Descripción general
El gráfico de imágenes genéricas es un wrapper genérico para todos los gráficos que produce la API de Google Chart. Lee la documentación de la API de Chart antes de intentar usar esta visualización. Ten en cuenta que puedes enviar hasta 16,000 datos con esta visualización, a diferencia del límite de 2,000 en las llamadas directas a la API de Chart.
Todos los datos se pasan a los gráficos mediante DataTable o DataView. Además, algunas etiquetas se pasan como columnas en la tabla de datos.
Todos los demás parámetros de URL de la API de Chart (excepto chd) se pasan como opciones.
Por: Google
Ejemplos
A continuación, se presentan ejemplos de varios tipos diferentes de gráficos.
Gráfico de líneas
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Gráfico de barras verticales
Ten en cuenta que, en los gráficos de barras unidas, no es necesario especificar chxt='x' como lo harías si llamaras al gráfico tú mismo. Si no especificas un eje, el gráfico de imágenes genéricas intenta configurar el gráfico de forma correcta de forma predeterminada.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Gráfico circular
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Gráfico radial
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Gráfico del mapa
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Cargando
El nombre del paquete google.charts.load es “imagechart”
google.charts.load('current', {'packages': ['imagechart']});
El nombre de clase de la visualización es google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Formato de datos
Existen dos formatos de datos generalizados: uno para los gráficos de mapas y otro para todos los demás gráficos. Ten en cuenta que el único formato numérico que se admite para los datos es el tipo de número de JavaScript.
Nota No debes codificar como URL ningún valor de cadena que se pase como opción o dato.
Gráficos de mapas
Un gráfico de mapa toma una tabla de datos con dos columnas obligatorias:
- Primera columna: [string] Código de país o estado/provincia.
- Segunda columna: [number] El valor para ese país o estado.
Consulta la documentación sobre gráficos de mapas para obtener más información.
Gráficos que no son del mapa
Los gráficos que no son de mapa toman una tabla de datos con dos columnas opcionales (una al principio, otra al final) y una o más columnas de datos en el medio:
- Primera columna: [optional, string] Cada entrada representa una etiqueta que se usa en el eje X (equivalente al parámetro
chlochxl) para los gráficos compatibles. - Columnas siguientes: Cualquier cantidad de columnas numéricas, cada una de las cuales representa una serie de datos.
- Últimas columnas: [opcional, string] Cualquier cantidad de columnas de string después de las columnas de datos, en la que cada entrada representa una etiqueta de dato para los gráficos compatibles. Si deseas usar esta columna, debes especificar la opción
annotationColumns.
Los datos se mostrarán de diferentes maneras, según el tipo de gráfico. Consulta la documentación de tu gráfico.
Nota sobre los índices de columnas: La visualización del gráfico de imágenes genéricas quita las columnas de cadenas de la tabla de datos antes de enviarla al servicio de la API de Chart. Por lo tanto, los índices de columna en las opciones, los métodos y los eventos definidos en esta página incluyen las columnas de string en el recuento de índices. Sin embargo, los índices de columna en cualquier opción controlada por el servicio de la API de Chart (por ejemplo, la opción chm) ignoran las columnas de string en el recuento de índices.
Opciones de configuración
Se definen las siguientes opciones para esta visualización. Se definen en el objeto de opciones que se pasa al método draw() de la visualización.
No todas las opciones siguientes son compatibles con todos los tipos de gráfico; consulta la documentación para tu tipo de gráfico de imagen estática. Puedes pasar cualquier parámetro de URL de la API de Chart como opción. Por ejemplo, el parámetro de URL chg=50,50 de una visualización de gráfico se especificaría de esta manera: options['chg'] = '50,50'.
Nota sobre los colores: Las opciones de color, como colors, color y backgroundColor, se especifican en el formato de color de la API de Chart.
Este formato es similar al formato #RRGGBB, excepto que incluye un cuarto número hexadecimal opcional para indicar la transparencia. No se admiten colores legibles por humanos, como “rojo”, “verde”, “azul”, etcétera. El formato de color de la API de gráficos no incluye el símbolo # inicial, pero las opciones de visualización de gráficos de imágenes genéricas aceptarán códigos de color con o sin #.
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| annotationColumns | Array<object> | ninguno | Etiquetas de datos para varios tipos de gráficos. Este es un array de objetos, en el que cada uno asigna una etiqueta con formato a un dato del gráfico. Esta opción solo está disponible para los gráficos que admiten datos (consulta el tema vinculado para saber cuáles) y la tabla de datos debe tener al menos una de las columnas de etiqueta de cadena. Cada objeto del array tiene las siguientes propiedades:
Ejemplo: En este fragmento, se define una etiqueta de texto negra de 12 píxeles, con texto tomado de la columna 0 y asignado al punto de datos en la columna 2 de la misma fila: |
| backgroundColor | cadena | '#FFFFFF' (blanco) | El color de fondo del gráfico en el formato de color de la API de Chart. |
| color | cadena | Automático | Especifica un color base para usar en todas las series; cada serie será una gradación del color especificado. Los colores se especifican en el formato de color de la API de Chart.
Se ignora si se especifica colors. |
| colores | Arreglo<string> | Automático | Úsala para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de Chart.
El color i se usa para la columna de datos i y se ajusta al principio si hay más columnas de datos que colores. Si las variaciones de un solo color son aceptables para todas las series, usa la opción color en su lugar. |
| enableEvents | boolean | false | Hace que los gráficos muestren eventos activados por el usuario, como un clic o el mouse. Solo es compatible con tipos de gráficos específicos. Consulta la sección Eventos a continuación. |
| relleno | boolean | false | Si esta preferencia se establece como "true", se rellena el área debajo de cada línea. Disponible solo para gráficos de líneas. |
| firstHiddenColumn | número | ninguno | Un índice de columna de datos. La columna indicada, así como todas las columnas siguientes, no se utilizarán para dibujar los elementos principales de la serie de gráficos (como las líneas en un gráfico de líneas o las barras en un gráfico de barras), sino que se utilizarán como datos para marcadores y otras anotaciones. Ten en cuenta que las columnas de string se incluyen en este recuento de índices. |
| height | número | 200 | Altura del gráfico en píxeles. Si falta o no se encuentra en un rango aceptable, se usa la altura del elemento que lo contiene. Si también está fuera del rango aceptable, se usará la altura predeterminada. |
| etiquetas | cadena | "none" | [Solo gráfico circular] Es la etiqueta que se mostrará para cada porción, si la hay. Elige uno de los siguientes valores:
|
| leyenda | cadena | 'derecha' | Dónde mostrar la leyenda del gráfico en relación con este. Especifica una de las siguientes opciones: "top", "bottom", "left", "right" y "none". Se ignora en los gráficos que no incluyen leyendas (como los gráficos de mapas). |
| max | número | Valor máximo de datos | El valor máximo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor máximo de los datos, excepto los gráficos de barras, en los que el valor predeterminado es el valor máximo de datos. Esta opción se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos. |
| min | número | Valor mínimo de los datos | El valor mínimo que se muestra en la escala. Se ignora para los gráficos circulares. El valor predeterminado es el valor mínimo de datos, excepto los gráficos de barras, en los que el valor predeterminado es cero. Esta opción se ignora para los gráficos de barras cuando la tabla tiene más de una columna de datos. |
| showCategoryLabels | boolean | verdadero | Si las etiquetas deben aparecer en el eje de categoría (es decir, fila). Disponible solo para gráficos de líneas y de barras. |
| showValueLabels | boolean | verdadero | El valor verdadero muestra una etiqueta en el eje de valor. Disponible solo para gráficos de líneas y de barras. |
| singleColumnDisplay | número | ninguno | Renderiza solo la columna de datos especificada. Este número es un índice basado en cero en la tabla, donde cero es la primera columna de datos. El color asignado a una sola columna es el mismo que cuando se renderizan todas las columnas. No se puede usar con gráficos circulares o de mapa. |
| título | cadena | Cadena vacía | Es el título del gráfico. Si no se especifica, no se mostrará ningún título. El parámetro de gráfico equivalente es chtt. |
| valueLabelsInterval | número | Automático | El intervalo en el que se muestran las etiquetas del eje de valores. Por ejemplo, si min es 0, max es 100 y valueLabelsInterval es 20, el gráfico mostrará etiquetas de eje en (0, 20, 40, 60, 80 100). |
| width | número | 400 | Es el ancho del gráfico (en píxeles). Si falta o no se encuentra en un rango aceptable, se usa el ancho del elemento que lo contiene. Si también queda fuera del rango aceptable, se usará el ancho predeterminado. |
Métodos
| Método | Tipo de datos que se muestra | Descripción |
|---|---|---|
draw(data, options) |
Ninguno | Dibuja el mapa. |
getImageUrl() |
String | Muestra la URL de la API de Google Chart que se usó para solicitar el gráfico. Ten en cuenta que puede tener más de 2,000 caracteres. Consulta la API de Google Chart para obtener más información. |
Eventos
Si configuras la propiedad enableEvents como verdadera, los gráficos compatibles mostrarán eventos para los eventos de usuario enumerados en la siguiente tabla. Todos estos eventos muestran un objeto event con las siguientes propiedades:
type: Es una cadena que representa el tipo de evento.region: Es un ID para la región afectada. Agrega el parámetrochof=jsonal tipo de gráfico sin procesar para ver una lista de los nombres disponibles. Consultachof=jsonpara obtener más información.
| Nombre | Descripción | tipo Valor |
|---|---|---|
error |
Se activa cuando se produce un error cuando se intenta renderizar el gráfico. | ID, mensaje |
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre un elemento del gráfico. | "mouseover" |
onmouseout |
Se activa cuando el usuario aleja el mouse de un elemento del gráfico. | "mouseout" |
onclick |
Se activa cuando un usuario hace clic en un elemento del gráfico. | "clic" |
¿Qué gráficos admiten eventos?
Los gráficos que admiten el parámetro chof=json admiten eventos de lanzamiento (es decir, todos los gráficos, excepto los especiales, como códigos QR).
Ejemplo de manejo de eventos
A continuación, se muestra un ejemplo de una barra que registra los clics del mouse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Política de Datos
Los datos se envían al servicio de la API de Google Chart.
Localización
Esta visualización admite cualquier localización compatible con el servicio de Google Chart.