Guía del desarrollador

El API de Google Chart permite generar gráficos de forma dinámica. Para ver el API de Chart en acción, copia la siguiente URL una ventana de un navegador:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Pulsa la tecla Intro o la de retorno de carro y... ¡listo! - deberás ver la siguiente imagen:

Contenido

Audiencia Política de uso ¡Ampliado! Introducción Formato de URL Parámetros opcionales y obligatorios ¡Ampliado! Tamaño del gráfico Datos del gráfico Codificación de texto Codificación de texto con escala de datos ¡Nuevo! Codificación sencilla Codificación ampliada Snippet JavaScript para codificar datos Directrices de granularidad Tipo de gráfico Gráficos de líneas Palabras gráficas ¡Nuevo! Gráficos de barras Gráficos circulares Diagramas de Venn Gráficos de puntos Gráficos de radar ¡Nuevo! Mapas ¡Nuevo! Google-o-meter ¡Nuevo!

Colores Colores de gráfico Relleno sólido ¡Ampliado! Gradiente lineal Rayas lineales Área de relleno Etiquetas Título del gráfico Leyenda del gráfico Etiquetas de Google-o-meter y gráfico circular Etiquetas para varios ejes Estilos Espaciado y ancho de barras Línea cero de gráfico de barras ¡Nuevo! Estilos de línea ¡Ampliado! Líneas de cuadrícula Marcadores de intervalo y forma ¡Ampliado! Asignaciones de caracteres Valores de los caracteres de codificación sencilla Valores de los caracteres de codificación ampliada Códigos de los estados de Estados Unidos de América Códigos de países ISO 3166

Volver al principio

Audiencia

Este documento está destinado a programadores que desean incluir imágenes del API de Google Chart en una página web. Ofrece una introducción al uso del API y material de referencia sobre los parámetros disponibles.

Política de uso

No hay límite en el número de llamadas diarias que puedes hacer al API de Google Chart. Sin embargo, nos reservamos el derecho a bloquear cualquier uso que consideremos abusivo, como un intento aparente de negación de servicio. Si piensas que tu servicio hará más de 250.00 llamadas diarias al API, envíanos una estimación a la dirección de correo electrónico chart-api-notifications@google.com.

Introducción

El API de Google Chart generará una imagen en formato PNG como respuesta a una URL. Se pueden generar varios tipos de imágenes, como gráficos de líneas, de barras y circulares. Puedes especificar atributos para cada tipo de imagen, como tamaño, colores y etiquetas.

Para incluir una imagen del API de Chart en una página web, introduce una URL dentro de una etiqueta <img>. Cuando se visualice la página web en un navegador, el API de Chart insertará la imagen en la página.

Todas las imágenes de este documento se generaron con el API de Chart. Para ver la URL de una imagen:

• si utilizas Firefox, haz clic con el botón derecho en la imagen y, a continuación, selecciona View image o Properties.
• si utilizas Internet Explorer, haz clic con el botón derecho en la imagen y, a continuación, selecciona Properties.

En este documento se describe el formato que deben tener las URL del API de Chart y los parámetros disponibles.

Volver al principio

Formato de URL

Las URL del API de Google Chart deben tener el siguiente formato:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Nota: cada URL debe estar en una misma línea.

Los parámetros están separados con el carácter de ampersand &. Puedes especificar todos los parámetros que quieras y en cualquier orden. Por ejemplo, el API de Chart genera los siguientes gráficos como respuesta a las siguientes URL:

http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World

Donde:

• http://chart.apis.google.com/chart? es la ubicación del API de Chart.
• & separa los parámetros.
• chs=250x100 es el tamaño del gráfico en píxeles.
• chd=t:60,40 son los datos del gráfico.
• cht=p3 es el tipo de gráfico.
• chl=Hello|World es la etiqueta del gráfico.

Para incluir una imagen del API de Chart en un archivo HTML, introduce una URL dentro de una etiqueta <img>. Por ejemplo, la siguiente etiqueta <img> genera la misma imagen de antes:

<img src="http://chart.apis.google.com/chart?
chs=250x100
&amp;chd=t:60,40
&amp;cht=p3
&amp;chl=Hello|World"
alt="Sample chart" />

Nota: cuando introduzcas una URL en una etiqueta <img> de HTML, ten cuidado de utilizar la referencia a la entidad de caracteres & en lugar del signo (&).

Volver al principio

Parámetros opcionales y obligatorios

Debes introducir al menos los siguientes parámetros:

• Tamaño del gráfico
• Datos del gráfico
• Tipo de gráfico
  

El resto de parámetros son opcionales. En la tabla siguiente se especifican los parámetros opcionales según el tipo de gráfico.

Parámetro	Gráfico de barras	Gráfico de líneas y palabra gráfica	Gráfico de radar	Gráfico de puntos	Diagrama de Venn	Gráfico circular	Google- o-meter	Maps
Colores de gráfico	Sí	Sí	Sí	Sí	Sí	Sí	Sí	Sí
Relleno sólido	Sí	Sí	Sí	Sí	Sí	Sí	Sólo fondo	Sólo fondo
Escala de datos	Sí	Sí	Sí	Sí	Sí	Sí	Sí
Gradiente lineal	Sí	Sí	Sí	Sí	Sí	Sólo fondo
Rayas lineales	Sí	Sí	Sí	Sí	Sí	Sólo fondo
Título del gráfico	Sí	Sí	Sí	Sí	Sí	Sí
Leyenda del gráfico	Sí	Sí	Sí	Sí	Sí
Etiquetas para varios ejes	Sí	Sí	Sí	Sí
Líneas de cuadrícula	Sí	Sí	Sí	Sí
Marcadores de forma	Sí	Sí	Sí	Sí
Marcadores de intervalo horizontales	Sí	Sí	Sí	Sí
Marcadores de intervalo verticales	Sí	Sí	Sí	Sí
Estilos de línea	Sí	Sí	Sí
Área de relleno	Sí	Sí	Sí
Espaciado y ancho de barras	Sí
Línea cero de gráfico de barras	Sí
Etiquetas de Google-o-meter y gráfico circular						Sí	Sí

Volver al principio

Tamaño del gráfico

Para especificar el tamaño del gráfico, utiliza chs=<width in pixels>x<height in pixels>

Por ejemplo, chs=300x200 generará un gráfico de 300 píxeles de ancho y 200 píxeles de altura.

El área máxima para todos los gráficos, excepto para los mapas, es de 300.000 píxeles. El valor máximo para altura y ancho es de 1000 píxeles, por lo que algunos ejemplos del tamaño máximo de un gráfico serían 1000x300, 300x1000, 600x500, 500x600, 800x375 y 375x800.

Para los mapas, el tamaño máximo es 440 píxeles de ancho por 220 píxeles de alto.

Si los gráficos circulares especificados son demasiado pequeños, el gráfico aparecerá recortado (sólo se podrá ver parte de él). Las directrices generales de tamaño para los gráficos circulares son:

• el ancho de un gráfico bidimensional debe ser aproximadamente el doble que su altura.
• el ancho de un gráfico tridimensional debe superar aproximadamente 2,5 veces su altura.

Volver al principio

Datos del gráfico

Para poder crear un gráfico, debes codificar los datos en una forma comprensible para el API de Chart. Utiliza uno de los formatos siguientes:

• La codificación de texto utiliza una cadena de números de punto flotante positivos desde cero hasta cien.
  La codificación de texto con escala de datos utiliza una cadena de cualquier número de punto flotante positivo o negativo en combinación con un parámetro de escala. Ten en cuenta que esta opción no está disponible para mapas.
  Al permitir cinco píxeles por cada punto de datos, los números enteros (1.0, 2.0...) son suficientes para los gráficos de líneas y de barras de hasta un máximo de 500 píxeles. Los valores con un decimal único (por ejemplo 35.7) permiten obtener una mayor resolución. La codificación de texto resulta apropiada para todos los tipos de gráficos, independientemente de su tamaño. Ten en cuenta que este tipo de codificación generalmente produce la URL más larga de un conjunto de datos determinado.
• La codificación sencilla utiliza caracteres alfanuméricos (A-Z, a-z y 0-9), donde A representa 0, B representa 1, y así sucesivamente hasta el 9, que representa 61. Por tanto, este sistema ofrece una resolución de 62 valores diferentes.
  Al permitir cinco píxeles por cada punto de datos, esto resulta suficiente para los gráficos de líneas y de barras de hasta un máximo de 300 píxeles. Este tipo de codificación produce la URL más corta de un conjunto de datos determinado.
• La codificación ampliada utiliza pares de caracteres alfanuméricos (además de otros que trataremos más adelante) en los que AA representa 0, AB representa 1, y así sucesivamente hasta los dos puntos (..), que representan 4095. Por tanto, este sistema ofrece una resolución de 4.096 valores diferentes.
  La codificación ampliada es la más adecuada para gráficos de gran tamaño que con un intervalo de datos muy amplio. Este tipo de codificación produce una URL dos veces más larga que la codificación siempre para un conjunto de datos determinado.

Nota: para las codificaciones simple y ampliada es recomendable codificar los datos de forma automática. Consulta la sección snippet JavaScript para codificar datos para empezar. Además, algunos miembros del grupo de Chart han contribuido a las bibliotecas de API. Busca en el grupo o visita esta entrada sobre enlaces útiles a las bibliotecas de API.

Volver al principio

Codificación de texto

Para especificar la codificación de texto, utiliza

chd=t:<chart data string>

Donde <chart data string> consiste en números de punto flotante positivos desde cero (0.0) hasta 100.0, el menos uno (-1) y el carácter de barra vertical (|).

Nota:

• Cero (0.0) = 0, 1.0 = 1, y así sucesivamente hasta 100.0 = 100.
• Para especificar un valor que falta, utiliza un menos uno (-1).
• Si tienes más de un conjunto de datos, separa cada uno de ellos con un carácter de barra vertical (|).

Por ejemplo: chd=t:10.0,58.0,95.0|30.0,8.0,63.0

Nota: para la codificación de texto, aplica una escala a tus datos convirtiéndolos en porcentajes del mayor valor de tu conjunto de datos.

Volver al principio

Codificación de texto con escala de datos

Para especificar la codificación de texto con escala de datos, utiliza dos parámetros

chd=t:<chart data string>
chds=<data set 1 minimum value>,<data set 1 maximum value>,<data set n minimum value>,<data set n maximum value>

Donde:

• <chart data string> consiste en cualquier número de punto flotante positivo o negativo
• <data set 1 minimum value> es el número más bajo que quieres aplicar al primer conjunto de datos
• <data set 1 maximum value> es el número más alto que quieres aplicar al primer conjunto de datos; si se omite se especificará 100
• <data set n minimum value> es el número más bajo que quieres aplicar al enésimo conjunto de datos
• <data set n maximum value> es el número más alto que quieres aplicar al enésimo conjunto de datos; si se omite se especificará 100

Si especificas menos parámetros de escala de datos que conjuntos de datos, el último parámetro de escala se aplicará a los demás conjuntos de datos. Especifica sólo un par de parámetros de escala para aplicar un único intervalo a un gráfico.

Nota:

• Esta opción no está disponible para mapas.
• Para especificar un valor que falta, utiliza un número fuera del intervalo.
• Si tienes más de un conjunto de datos, separa cada uno de ellos con un carácter de barra vertical (|).

Por ejemplo: chd=t:30,-60,50,120,80&chds=-80,140

Volver al principio

Codificación sencilla

Para especificar la codificación sencilla, utiliza

chd=s:<chart data string>

Donde <chart data string> contiene los caracteres: A-Z, a-z, 0-9, carácter de subrayado (_) y coma (,).

Nota:

• En las mayúsculas, A = 0, B = 1, y así sucesivamente hasta Z = 25.
• En las minúsculas, a = 26, b= 27, y así sucesivamente hasta z = 51.
• El cero (0) = 52, y así sucesivamente hasta 9 = 61.
• Para especificar un valor que falta, utiliza un carácter de subrayado (_).
• Si tienes más de un conjunto de datos, separa cada uno de ellos con una coma (,).

Por ejemplo, dos conjuntos de datos: chd=s:ATb19,Mn5tz donde —en el primer conjunto de datos— A representa 0, T representa 19, b representa 27, 1 representa 53 y 9 representa 61.

Nota: En la sección Valores de los caracteres de codificación sencilla podrás consultar una lista completa.

Volver al principio

Codificación ampliada

Para especificar la codificación ampliada, utiliza

chd=e:<chart data string>

Donde <chart data string> contiene pares de los caracteres: A-Z, a-z, 0-9, guión (-), punto (.), carácter de subrayado (_) y coma (,).

Nota:

• AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
  BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
  .A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
• Para especificar un valor que falta, utiliza dos caracteres de subrayado (__).
• Si tienes más de un conjunto de datos, separa cada uno de ellos con una coma (,).

Nota: En la sección Valores de los caracteres de codificación ampliada se incluyen instrucciones sobre cómo generar una lista completa.

Volver al principio

Snippet JavaScript para codificar datos

Probablemente te resulte más fácil traducir los datos reales a datos del API de Chart de forma automática en lugar de manualmente.

La siguiente snippet de JavaScript codifica un conjunto de datos mediante el sistema de codificación sencilla. El conjunto de datos debe tener el formato de una serie de números positivos. Los valores del conjunto de datos que no sean números positivos se codificarán con el carácter de subrayado (_) como si faltaran.

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
function simpleEncode(valueArray,maxValue) {

var chartData = ['s:'];
  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
return chartData.join('');
}

Ejecuta la función simpleEncode en la serie de números (valueArray) y el valor máximo (maxValue) de la serie de números. En el ejemplo siguiente, maxValue se ha configurado con un valor superior al número más alto de la serie para dejar algo de espacio entre el valor más alto y la parte superior del gráfico:

var valueArray = new Array(0,1,4,4,6,11,14,17,23,28,33,36,43,59,65);
var maxValue = 70; 
simpleEncode(valueArray,maxValue);

Volver al principio

Directrices de granularidad

Ten cuidado de no sobrestimar el número de puntos de datos necesario para el gráfico. Por ejemplo, para mostrar la popularidad de Britney Spears durante los últimos diez años, acumular las consultas de cada día generaría más de 3600 valores. Los datos resultantes serían excesivos para incluirlos en una URL y, además, no tendría sentido crear un gráfico con esta granularidad: en una pantalla de 1024 píxeles de ancho, un punto de datos sería aproximadamente un cuarto de píxel de la pantalla. En los siguientes ejemplos se ilustra este punto.

Gráfico de 200 por 100 con 20 puntos de datos (10 píxeles por cada punto de datos):

40 puntos de datos (5 píxeles por cada punto de datos):

80 puntos de datos (sólo 2,5 píxeles por cada punto de datos):

Volver al principio

Tipo de gráfico

Están disponibles los siguientes tipos de gráficos:

• Gráfico de líneas
• Palabra gráfica
• Gráfico de barras
• Gráfico circular
• Diagrama de Venn
• Gráfico de puntos
• Gráfico de radar
• Mapa
• Google-o-meter

Gráficos de líneas

Para especificar un gráfico de líneas, utiliza

cht=<line chart type>

Donde <line chart type> es lc o lxy tal como se describe en la tabla siguiente.

• En los gráficos del tipo lc, varios conjuntos de datos se representan como varias líneas.
• Para los gráficos del tipo lxy, se requiere un par de conjuntos de datos para cada línea.
• Para obtener más información sobre cómo especificar varios conjuntos de datos, consulta la sección Datos del gráfico.
• Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Parámetro	Descripción	Ejemplo
cht=lc	Gráfico de líneas, los puntos de datos están espaciados uniformemente a lo largo del eje x.	cht=lc
cht=lxy	Especifica un par de conjuntos de datos por cada línea que quieras representar; el primer conjunto de datos de cada par indicará las coordenadas del eje x y el segundo, las coordenadas del ejey. Especifica un valor único sin definir para espaciar uniformemente los puntos de datos a lo largo del eje x. El gráfico de ejemplo utiliza codificación de texto, por que lo que los valores sin definir se representan con -1. La codificación sencilla utiliza un carácter de subrayado (_) y la codificación ampliada dos caracteres de subrayado (__) cuando un valor falta o no está definido. Para especificar los marcadores de forma de los puntos de datos, utiliza el parámetro chm tal como se describe en Marcadores de forma. Para especificar colores de línea, utiliza el procedimiento descrito en la sección Colores.	cht=lxy chd=t:0,30,60,70,90,95,100| 20,30,40,50,60,70,80| 10,30,40,45,52| 100,90,40,20,10| -1| 5,33,50,55,7

Palabras gráficas

Para especificar una palabra gráfica, utiliza

cht=ls

Una palabra gráfica tiene exactamente los mismos parámetros que un gráfico de líneas. La única diferencia es que de forma predeterminada no se representan las líneas de los ejes de las palabras gráficas. Si quieres añadir etiquetas para los ejes, consulta la sección Etiquetas para varios ejes.

Volver al principio

Gráficos de barras

Para especificar un gráfico de barras, utiliza

cht=<bar chart type>

Donde <bar chart type> es bhs, bhg, bvs o bvg tal como se describe en la tabla siguiente.

• En función del tipo de gráfico de barras, varios conjuntos de datos se representan como barras agrupadas o apiladas.
• Para obtener más información sobre cómo especificar varios conjuntos de datos, consulta la sección Datos del gráfico.
• Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Parámetro	Descripción	Ejemplo
cht=bhs cht=bvs	Gráfico de barras horizontales y verticales respectivamente. El primer ejemplo (todas las barras en azul oscuro) muestra un único conjunto de datos. El segundo ejemplo (barras en azul claro y oscuro) muestra dos series de datos. Como puedes ver, los distintos conjuntos de datos se apilan, por lo que debes especificar un color para uno. También puedes especificar un color para cada punto de datos dentro de un mismo conjunto de datos. Si quieres obtener información detallada, consulta la sección Colores. En el segundo ejemplo no utiliza escala de datos, por lo que los puntos de datos que muestran un valor combinado superior a 100 están fuera de la escala. En el tercer ejemplo no se utiliza una escala de datos para que las barras muestren la escala correctamente.	cht=bhs chco=4d89f9 cht=bvs chco=4d89f9,c6d9fd chd=t:10,50,60,80,40| 50,60,100,40,20 cht=bvs chco=4d89f9,c6d9fd chd=t:10,50,60,80,40| 50,60,100,40,20 chds=0,160
cht=bhg cht=bvg	Gráfico de barras horizontales y verticales, respectivamente, en los colores especificados, los distintos conjuntos de datos están agrupados.	cht=bhg chco=4d89f9,c6d9fd cht=bvg chco=4d89f9,c6d9fd
chbh	El tamaño de los gráficos de barras se configura de forma diferente a los otros tipos de gráficos. Para los gráficos de barras horizontales del tipo bhs y bhg, y para los gráficos de barras verticales del tipo bvs y bvg, el tamaño de los gráficos se configura mediante el parámetro chs. Si el tamaño especificado (con chs) es demasiado pequeño, el gráfico aparecerá recortado (sólo se podrá ver parte de él).  Por este motivo, es posible que prefieras especificar el espaciado y ancho de las barras con chbh= <bar width in pixels>, <optional space between bars in a group>, <optional space between groups> Nota: si no se especifica el parámetro que define el espacio entre barras, se tomará de forma predeterminada la mitad del valor del espacio entre grupos.	chbh omitted cht=bhs chbh=10 cht=bhs

Volver al principio

Gráficos circulares

Para especificar un gráfico circular, utiliza

cht=<pie chart type>

Donde <pie chart type> es p o p3 tal como se describe en la tabla siguiente.

• Proporciona sólo un conjunto de datos; los conjuntos de datos posteriores se ignorarán.
• Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Nota: El API de Google Chart calcula el radio del círculo partiendo de la altura y el ancho mínimos especificados en los parámetros de tamaño del gráfico (chs). El gráfico aparecerá cortado si el tamaño especificado es demasiado reducido. Si incluyes etiquetas, probablemente necesitarás especificar el doble de ancho que de altura.

Parámetro	Descripción	Ejemplo
cht=p	Gráfico circular bidimensional. A menos que se especifique lo contrario, los colores de los segmentos de círculos aparecerán interpolados del naranja oscuro al amarillo claro. Para especificar otros colores, utiliza el procedimiento descrito en la sección Colores. Para especificar etiquetas, utiliza el parámetro chl tal como se describe en Etiquetas de gráfico circular.	cht=p chs=200x100
cht=p3	Gráfico circular tridimensional. Para especificar etiquetas, utiliza el parámetro chl tal como se describe en Etiquetas de gráfico circular.	cht=p3 chs=250x100

Volver al principio

Diagramas de Venn

Para especificar un diagrama de Venn, utiliza

cht=v

Proporciona un conjunto de datos en el que:

• los tres primeros valores indiquen los tamaños relativos de tres círculos (A, B y C)
• el cuarto valor indique el área de la intersección de A con B
• el quinto valor indique el área de la intersección de A con C
• el sexto valor indique el área de la intersección de B con C
• el séptimo valor indique el área de la intersección de A con B y C

Parámetro	Descripción	Ejemplo
cht=v	En este ejemplo, el valor del primer círculo es 100, el del segundo 80 y el del tercero 60. El valor que indica la intersección entre todos los círculos es 30. Para obtener información sobre los parámetros disponibles para los diagramas de Venn, consulta la tabla de parámetros opcionales según el tipo de gráfico.	cht=v chd=t:100,80,60,30,30,30,10

Volver al principio

Gráficos de puntos

Para especificar un gráfico de puntos, utiliza

cht=s

• Para obtener más información sobre cómo especificar varios conjuntos de datos, consulta la sección Datos del gráfico.
• Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Parámetro	Descripción	Ejemplo
cht=s	Proporciona dos conjuntos de datos, un primer conjunto que indique las coordenadas respecto al eje x y un segundo conjunto que indique las coordenadas respecto al eje y. La forma predeterminada para los puntos de datos es el círculo. Para especificar otra forma de puntos de datos, utiliza el parámetro chm tal como se describe en Marcadores de forma. El color de punto de datos predeterminado es el azul. Para especificar otros colores, utiliza el procedimiento descrito en la sección Colores. En el ejemplo, observarás que los puntos de datos tienen distintos tamaños. Para comprobarlo, especifica un tercer conjunto de datos. Cualquier tamaño especificado con el parámetro chm determina el tamaño máximo de cualquier punto de datos. El tamaño de cada punto de datos estará determinado por el tamaño del tercer conjunto de datos opcional. Así, por ejemplo, si se especifica un tamaño de 20 píxeles con el parámetro chm y el valor más alto posible para el tipo de codificación que se esté utilizando (9, 100.0 o ..) en el tercer conjunto de datos, se obtendrá un punto de datos de 20 píxeles.	cht=s

Volver al principio

Gráficos de radar

Para especificar un gráfico de radar, utiliza

cht=r o cht=rs

Para un gráfico de tipo r, los puntos aparecen conectados con líneas rectas.

Para un gráfico de tipo rs, los puntos aparecen conectados con curvas spline.

• Si existen varios conjuntos de datos, éstos se representan como varias líneas.
• Para obtener más información sobre cómo especificar varios conjuntos de datos, consulta la sección Datos del gráfico.
• Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Parámetro	Descripción	Ejemplo
cht=r	Puedes empezar con este sencillo ejemplo. Los puntos de datos se representan entre el centro del gráfico y el perímetro. Los puntos de valor cero (0, A o AA, en función del tipo de codificación) se representan en el centro, mientras que el valor máximo de la codificación utilizada (100, 9 o ..) se representa en el perímetro. Los valores intermedios se muestran en escala entre ambos valores. El primer valor y el último de la serie de datos se representan entre el centro y la parte superior del gráfico. El resto de distribuye uniformemente en el sentido de las agujas del reloj alrededor del gráfico.	cht=r chd=t:10,20,30,40,50,60,70,80,90
cht=r	Éste ejemplo es mucho más interesante. Este gráfico muestra dos conjuntos de datos y el color de cada uno de ellos se especifica con chco. Para obtener más información, consulta la sección Colores de gráfico. El estilo de las líneas se especifica con chls. Para obtener más información, consulta la sección Estilos de línea. Las etiquetas se especifican con chxt, chxl y chxr. Para obtener más información, consulta la sección Etiquetas para varios ejes. Para los gráficos de radar, el eje x se representa en un círculo y el eje y y el eje r desde el centro del gráfico hasta la parte superior. El eje t se ignora. Nota: cuando se incluyen las etiquetas, el espacio de los puntos de datos alrededor del gráfico queda determinado por el número de etiquetas o por el número de puntos de datos menos uno, el valor que sea mayor.	chco=FF0000,FF9900 chls=2.0,4.0,0.0|2.0,4.0,0.0 chxt=x chxl=0:|0|45|90|135|180|225|270|315 chxr=0,0.0,360.0
	Éste es el mismo ejemplo que el anterior, pero con el área de relleno especificada para ambos conjuntos de datos. Para obtener más información, consulta Área de relleno. Además, se especifica una cuadrícula. Para obtener más información, consulta la sección Líneas de cuadrícula.	chg=25.0,25.0,4.0,4.0 chm= B,FF000080,0,1.0,5.0| B,FF990080,1,1.0,5.0
	En este ejemplo se especifican marcadores de forma: el círculo externo azul se especifica con chm=h,0000FF,... el círculo interno azul parcialmente transparente se especifica con chm=h,3366CC80,... la línea verde parcialmente transparente (entre la 1 y las 2 en punto) se especifica con chm=V,00FF0080,... la línea verde oscuro (a las 8 en punto) se especifica con chm=V,008000,... la línea verde (a las 10 en punto) se especifica con chm=v,00A000,... Para obtener más información, consulta las secciones Marcadores de forma y Colores. También puedes especificar marcadores de intervalo. Para obtener más información, consulta la sección Marcadores de intervalo.	chm= h,0000FF,0,1.0,4.0| h,3366CC80,0,0.5,5.0| V,00FF0080,0,1.0,5.0| V,008000,0,5.5,5.0| v,00A000,0,6.5,4

Volver al principio

Maps

Para especificar un mapa, utiliza

cht=t y chtm=<geographical area>

Donde <geographical area> es uno de los siguientes:

• africa
• asia
• europe
• middle_east
• south_america
• usa
• world

Por ejemplo:

chs=440x220
chd=s:_
cht=t
chtm=world

Nota: La codificación de texto con escala de datos no está disponible para mapas. En su lugar, utiliza la codificación de texto, la codificación simple o la codificación ampliada.

Éste es el mapa del mundo predeterminado. El tamaño utilizado en el ejemplo (440 x 220 píxeles) es el máximo disponible para todos los mapas. Ten en cuenta también que el conjunto de datos contiene sólo un carácter de subrayado (_). Este carácter especifica un valor que falta en la codificación simple y permite crear el mapa más simple posible. Para hacer que tu mapa sea mucho más informativo (e interesante) que el ejemplo anterior, aplica color a uno o varios países del mapa.

Para especificar los colores de un mapa y cómo deben aplicarse a cada país o estado dentro del mapa, utiliza una combinación de tres parámetros:

chco=<default color><colors for gradient>
chld=<list of codes for each country or state to be colored>
chd=<list of values for each country or state to be colored>

Donde:

• <default color>, <colors for gradient> son números hexadecimales en formato RRGGBB. El color predeterminado se aplica a países o estados que no aparecen en el parámetro chld. Los otros colores especifican los extremos de un gradiente de color utilizado para aplicar color a todos los países incluidos en el parámetro chld. El color aplicado depende del valor del país en el parámetro chd.
• <list of codes for each country or state to be colored> es una lista de:
  • códigos ISO 3166-1-alpha-2 para países, según se define en ISO3166. Para obtener más información, consulta la sección Códigos de países ISO 3166.
  • Los códigos de los estados de Estados Unidos se especifican en la sección Códigos de los estados de Estados Unidos.
• <list of values for each country or state to be colored> son valores de codificación simple, de texto o ampliada. El primer valor se utiliza para el primer país especificado en el parámetro chld, el segundo para el segundo, y así sucesivamente. El valor de datos más bajo; A, 0 o AA, en función del tipo de codificación utilizado, se dibuja en el color especificado por <color for start of gradient> en chco. El más alto; 9, 100 o .. se dibuja en el color especificado por <color for end of gradient>. Los valores intermedios permiten utilizar valores intermedios.

Por ejemplo:

chtm=africa
chco=ffffff,edf0d4,13390a
chld=MGKETN
chd=s:Af9
chf=bg,s,EAF7FE

En este ejemplo:

• el primer color (ffffff que especifica el color blanco) se utiliza para cualquier país no incluido en el parámetro chld
• los colores segundo y tercero especifican un gradiente de color desde verde claro (edf0d4) hasta verde oscuro (13390a)
  
• los países a los que se les aplicará color son Madagascar (MG), Kenia (KE) y Túnez (TN)
• Madagascar tiene el valor A, que es el valor mínimo posible en codificación simple y equivale a cero.
  Madagascar, por tanto, aparecerá en verde claro (edf0d4)
• El valor de Kenia es f, que equivale a 31. Kenia, por tanto, aparecerá en un color intermedio entre verde claro y oscuro
• Túnez tiene el valor 9, que es el valor máximo posible en codificación simple y equivale a 61.
  Túnez, por tanto, aparecerá en verde oscuro (13390a)
• las masas de agua aparecen en azul claro (EAF7FE), ya que se considera que esta zona es el fondo del mapa. Consulta el parámetro chf, tal como se describe en la sección Relleno de fondo y área del gráfico.

Este ejemplo utiliza más colores:

chco=
f5f5f5,
edf0d4,
6c9642,
13390a

Aquí, el color predeterminado es f5f5f5. El gradiente de color se especifica con edf0d4, 6c9642 y 13390a. Para explicar cómo se aplica, es más fácil utiliza codificación de texto:

• el valor cero permite utilizar el verde más claro (edf0d4)
• el valor 50 permite utilizar un verde intermedio (6c9642)
• el valor 100 permite utilizar el verde más oscuro (13390a)
• un valor intermedio se interpola entre los colores más próximos. De esta forma, por ejemplo, el valor 75 estaría a medio camino entre el verde intermedio (6c9642) y el verde más oscuro (13390a).

Volver al principio

Google-o-meter

Para especificar un Google-o-meter, utiliza

cht=gom

Para obtener más información sobre los parámetros disponibles, consulta la tabla de parámetros opcionales según el tipo de gráfico.

Parámetro	Descripción	Ejemplo
cht=gom	Éste es un ejemplo de un Google-o-meter, donde se utilizan colores predeterminados (desde el rojo del sombreado de la izquierda pasando por el naranja y el amarillo hasta el verde de la derecha). Para obtener información sobre cómo especificar otros colores, consulta Colores de gráfico. Para obtener información sobre cómo especificar el texto que aparece al final de la flecha, consulta Etiquetas de Google-o-meter y gráfico circular.	cht=gom chd=t:70

Volver al principio

Colores

Especifica un color con una cadena alfabética que contenga un mínimo de 6 valores hexadecimales con formato RRGGBB. Por ejemplo:

• FF0000 = rojo
• 00FF00 = verde
• 0000FF = azul
• 000000 = negro
• FFFFFF = blanco

También puedes especificar la transparencia si añades un valor hexadecimal entre 00 y FF, donde 00 corresponderá a una transparencia total y FF a una opacidad total. Por ejemplo:

• 0000FFFF = azul opaco
• 0000FF00 = azul transparente
  

Se encuentran disponibles las siguientes opciones de color:

• Colores de gráfico
• Relleno sólido ¡Ampliado!
• Gradiente lineal
• Rayas lineales
• Área de relleno

Volver al principio

Colores de gráfico

Para especificar colores de líneas, barras, diagramas de Venn, Google-o-meters y segmentos de círculos, utiliza

chco=
<color1>,
...
<colorn>

Donde <color1> y todos los valores de color sucesivos son números hexadecimales en formato RRGGBB.

Parámetro	Descripción	Ejemplo
chco	En este ejemplo se han especificado tres conjuntos de datos y tres colores.	chco=ff0000,00ff00,0000ff
	Este ejemplo también tiene tres conjuntos de datos, pero sólo se han especificado dos colores. Por eso las dos últimas líneas se han representado en el último color (rojo ff0000).	chco=ff0000,0000ff
	En gráficos de barras, si el número de colores especificado es inferior al de conjuntos de datos, los colores se alternarán. En el gráfico siguiente, el tercer conjunto de datos, Bar, se representa en el primer color. Si sólo se especifica un color, todos los conjuntos de datos se representarán en ese color.	chco=ff0000,00ff00 chd=s:FOE,THE,Bar
	Éste es el mismo gráfico con tres colores especificados.	chco=ff0000,00ff00,0000ff chd=s:FOE,THE,Bar
	Para especificar un color para cada punto de datos dentro de una serie de datos únicos, separa los parámetros de color chco con una barra vertical (|).	chco=ff0000|00ff00|0000ff chd=s:elo
	En gráficos circulares, si el número de colores especificado es inferior al de sectores, los colores se interpolarán.	chco=0000ff
	En el caso de los diagramas de Venn, si el número de colores especificado es inferior al de círculos se repetirá el último color.	chco=00ff00,0000ff
	Para un Google-o-meter, especifica al menos dos colores, más aún si quieres especificar el gradiente intermedio. zz	chco=ffffff,ffaaaa,ff0000

Volver al principio

Área de relleno

Para especificar un área de relleno, utiliza

chm=
b,<color>,<start line index>,<end line index>,<any value>|
...
b,<color>,<start line index>,<end line index>,<any value>

Donde:

• <color> es un número hexadecimal en formato RRGGBB.
• <start line index> es el índice de la línea en la que comienza el relleno. Viene determinado por el orden en el que los conjuntos de datos se especifican con chd. El primer conjunto de datos tiene un índice de cero (0), el segundo de 1, y así sucesivamente.
• <end line index> es el índice de la línea en la que finaliza el relleno. Viene determinado por el orden en el que los conjuntos de datos se especifican con chd. El primer conjunto de datos tiene un índice de cero (0), el segundo de 1, y así sucesivamente.
• <any value> se ignora.

El carácter de barra vertical (|) permite separar varias áreas de relleno.

Parámetro	Descripción	Ejemplo
chm=b	En primer lugar deberás especificar el conjunto de datos con los valores mayores: Para rellenar desde la parte de arriba del gráfico hasta la primera línea, deberás incluir un conjunto de datos que sólo tenga los valores más altos de los datos (9, 100.0 o .. en función del tipo de codificación utilizado). Para rellenar desde la última línea hasta la parte inferior del gráfico, deberás incluir un conjunto de datos que sólo tenga los valores más bajos de los datos (A, 0 o AA en función del tipo de codificación utilizado). Las líneas en sí se representan en negro mediante el parámetro chco tal como se describe en la sección Colores.	chd=s: 99, cefhjkqwrlgYcfgc, QSSVXXdkfZUMRTUQ, HJJMOOUbVPKDHKLH, AA chm= b,76A4FB,0,1,0| (light blue) b,224499,1,2,0| (blue) b,FF0000,2,3,0| (red) b,80C65A,3,4,0 (green) chco=000000,000000,000000, 000000,000000
	Por contraste, el primer conjunto de datos y el último (99 y AA) se han eliminado de este gráfico. También se ha omitido el parámetro chco para que las líneas se representen según el parámetro del tipo de gráfico. Aquí el parámetro es cht=lc, por ello se utiliza el color de línea predeterminado amarillo.	chd=s: cefhjkqwrlgYcfgc, QSSVXXdkfZUMRTUQ, HJJMOOUbVPKDHKLH, chm= b,224499,0,1,0| (blue) b,FF0000,1,2,0| (red) b,80C65A,2,3,0 (green)
chm=B	Para una serie de datos única, es más fácil utilizar chm=B. En este caso, el área que hay bajo la línea está rellena.	chm=B,76A4FB,0,0,0 chd=s:ATSTaVd21981uocA

Volver al principio

Relleno sólido

Para especificar relleno sólido, utiliza

chf=
<bg or c or a>,s,<color>|
<bg or c or a>,s,<color>

Donde:

• <bg or c or a> es:
  - bg para el relleno del fondo
  - c para el relleno del área del gráfico
  - a para aplicar transparencia a todo el gráfico.
• <s> indica relleno sólido.
• <color> es un número hexadecimal en formato RRGGBB.
• el carácter de barra vertical (|) separa definiciones de relleno. No es necesario utilizar ningún carácter de barra vertical después de la segunda definición.

Puedes especificar:

• fondo, relleno del área del gráfico y transparencia para los gráficos de líneas, palabras gráficas y gráficos de puntos.
• relleno de fondo y transparencia para gráficos de barras y circulares y diagramas de Venn.
• relleno de fondo para mapas.

Parámetro	Descripción	Ejemplo
chf	En este ejemplo, la imagen de fondo se rellena con gris claro (efefef).	chf=bg,s,efefef
	En este ejemplo se rellena el fondo con gris claro (efefef) y el área del gráfico con negro (000000).	chf=bg,s,efefef| c,s,000000
	Observa el efecto de especificar transparencia mediante valores hexadecimales de 20 para el fondo y 80 para el área del gráfico.	chf=bg,s,efefef20| c,s,00000080
	Este ejemplo aplica transparencia a todo el gráfico.	chf=a,s,efefeff0

Volver al principio

Gradiente lineal

Para especificar un gradiente lineal para gráficos de líneas, palabras gráficas, gráficos de barras, diagramas de Venn, gráficos de rada y gráficos de puntos, utiliza

chf=<bg or c>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n>

Donde:

• <bg or c> es bg para relleno de fondo o c para relleno del área del gráfico.
• lg indica gradiente lineal.
• <angle> indica el ángulo del gradiente entre 0 (horizontal) y 90 (vertical).
• <color x> son números hexadecimales en formato RRGGBB.
• <offset x> indica el punto en el que el color es puro, donde: 0 indica la posición más a la derecha del gráfico y 1 la posición más a la izquierda.

Parámetro	Descripción	Ejemplo
chf	El área del gráfico tiene un gradiente lineal horizontal (de izquierda a derecha), especificado con un ángulo de cero grados (0). El azul (76A4FB) es el primer color especificado. Es un color puro en el extremo derecho del gráfico. El blanco (ffffff) es el segundo color especificado. Es un color puro en el extremo izquierdo del gráfico. El fondo del gráfico es gris (EFEFEF).	chf= c,lg,0,76A4FB,1,ffffff,0| bg,s,EFEFEF
	El área del gráfico tiene un gradiente lineal diagonal (de la esquina inferior izquierda a la superior derecha), especificado con un ángulo de cuarenta y cinco grados (45). El blanco (ffffff) es el primer color especificado. Es un color puro en la esquina inferior izquierda del gráfico. El azul (6A4FB) es el segundo color especificado. Es un color puro en la esquina superior derecha del gráfico. El fondo del gráfico es de nuevo gris (EFEFEF).	chf= c,lg,45,ffffff,0,76A4FB,0.75| bg,s,EFEFEF
	El área del gráfico tiene un gradiente lineal vertical (de arriba a abajo), especificado con un ángulo de noventa grados (90). El azul (76A4FB) es el primer color especificado. Es un color puro en la parte superior del gráfico. El blanco (ffffff) es el segundo color especificado. Es un color puro en la parte inferior del gráfico. El fondo del gráfico es de nuevo gris (EFEFEF).	chf= c,lg,90,76A4FB,0.5,ffffff,0| bg,s,EFEFEF

Volver al principio

Rayas lineales

Para especificar rayas lineales para gráficos de líneas, palabras gráficas, gráficos de barras, diagramas de Venn, gráficos de rada y gráficos de puntos, utiliza

chf=<bg or c>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n>

Donde:

• <bg or c> es bg para relleno de fondo o c para relleno del área del gráfico.
• ls indica rayas lineales.
• <angle> indica el ángulo del gradiente entre 0 (vertical) y 90 (horizontal).
• <color> es un número hexadecimal en formato RRGGBB.
• <width> debe ser un valor entre 0 y 1, siendo 1 la anchura total del gráfico. Las rayas se repiten hasta rellenar el gráfico.

Parámetro	Descripción	Ejemplo
chf	Área de gráfico con rayas verticales especificadas con ángulo de cero (0). El primer color especificado (gris oscuro CCCCCC) es la primera raya representada con una anchura del 20% del ancho del gráfico. El segundo color especificado (blanco ffffff) también se representa con una anchura del 20%. Las rayas se alternan hasta rellenar el gráfico. El fondo del gráfico se omite.	chf=c,ls,0,CCCCCC,0.2, FFFFFF,0.2
	Área de gráfico con rayas horizontales especificadas con ángulo de noventa grados (90). El primer color especificado (el gris más oscuro 999999) es la primera raya representada con una anchura del 25% del ancho del gráfico. El segundo y tercer color especificado (el gris más claro CCCCCC y el blanco FFFFFF) también se representan con una anchura del 25%. Las rayas se alternan hasta rellenar el gráfico. El fondo del gráfico se omite.	chf= c,ls,90, 999999,0.25, CCCCCC,0.25, FFFFFF,0.25

Volver al principio

Etiquetas

Están disponibles los siguientes tipos de etiquetas:

• Título del gráfico
• Leyenda del gráfico
• Etiquetas de gráfico circular
• Etiquetas para varios ejes

Título del gráfico

Para especificar el título del gráfico, utiliza

chtt=<chart title>

Parámetro	Descripción	Ejemplo
chtt	Para especificar un espacio, utiliza un signo más (+). Utiliza un carácter de barra vertical (|) para forzar un salto de línea.	chtt=Site+visitors+by+month| January+to+July
	Opcionalmente, también puedes establecer el color y el tamaño del título con chts=<color>,<fontsize> Si el tamaño especificado (con chs) es demasiado pequeño, el gráfico aparecerá recortado (sólo se podrá ver parte de él).	chtt=Site+visitors chts=FF0000,20

Volver al principio

Leyenda

Para especificar una leyenda, utiliza

chdl=<first data set label>|<n data set label>

Parámetro	Descripción	Ejemplo
chdl	Utiliza chdl con colores de línea tal como se describe en la sección Colores. En estos ejemplos, el primer conjunto de datos se representa en rojo, el segundo en verde y el tercero en azul.	chdl=First|Second|Third chco=ff0000,00ff00,0000ff
		chdl=First|Second|Third chco=ff0000,00ff00,0000ff

Volver al principio

Etiquetas de Google-o-meter y gráfico circular

Para especificar etiquetas en un gráfico circular, utiliza

chl=
<label 1 value>|
...
<label n value>

Para especificar un valor que falta, utiliza dos caracteres de barra vertical consecutivos (||).

Nota: Para mostrar etiquetas:
- El ancho de un gráfico bidimensional debe ser aproximadamente el doble que su altura.
- El ancho de un gráfico tridimensional debe superar aproximadamente 2,5 veces su altura.

Para especificar el texto que aparece sobre la flecha en un Google-o-meter, utiliza

chl=<label>

Parámetro	Descripción	Ejemplo
chl	Etiquetas de gráfico circular tridimensional.	chl=May|Jun|Jul|Aug|Sep|Oct chs=220x100
	Por supuesto, esto dependerá de la longitud de las etiquetas. En este gráfico las etiquetas se muestran parcialmente porque el gráfico no es suficientemente ancho.	chl=May|June|July|August| September|October chs=220x100
	Para que las etiquetas se mostrasen por completo, este gráfico debería tener 280 píxeles de ancho.	chl=May|June|July|August| September|October chs=280x100
	Éste es un ejemplo de un Google-o-meter con una etiqueta.	chl=Hello

Volver al principio

Etiquetas para varios ejes

Las etiquetas para varios ejes están disponibles para gráficos de líneas, de radar, de barras y de puntos:

• Tipo de eje
• Etiquetas de eje
• Posiciones de la etiqueta del eje
• Intervalo de ejes
• Estilos de ejes

Tipo de eje

Para especificar varios ejes, utiliza

chxt=
<axis 1>,
...
<axis n>

Los ejes disponibles son:

• x = eje x inferior
• t = eje x superior
• y = eje y izquierdo
• r = eje y derecho

Los ejes se especifican mediante el índice del parámetro chxt. El primer eje tiene un índice 0, el segundo un índice 1, y así sucesivamente. Para especificar varios ejes, incluye x, t, y o r varias veces.

Para crear varios ejes, se necesita al menos el parámetro chxt. Si faltan otros parámetros, el API de Chart utiliza los valores predeterminados, tal como se describe en las secciones siguientes.

Parámetro	Descripción	Ejemplo
chxt	Este ejemplo muestra dos ejes x inferiores (x se incluye dos veces), ejes y derecho e izquierdo (y y r) y un eje superior (t). Nota: Como las etiquetas de eje se han omitido, el API de Chart asume un intervalo de 0 a 100 para todos los ejes.	chxt=x,y,r,x,t

Volver al principio

Etiquetas de eje

Para especificar etiquetas, utiliza

chxl=
<axis index>:|<label 1>|<label n>|
...
<axis index>:|<label 1>|<label n>

El parámetro index indica el índice del eje al que se aplican las etiquetas.
Todas las etiquetas se separan mediante el carácter de barra vertical (|).

Nota: Las etiquetas de eje se tienen que especificar en orden (primero 0, después 1, después 2, y así sucesivamente).

La primera etiqueta se coloca al principio, la última al final y el resto espaciadas uniformemente entre ellas.

Parámetro	Descripción	Ejemplo
chxt y chxl	Este ejemplo muestra ejes y (y yr) izquierdo y derecho y dos conjuntos de valores para el eje x (x). Nota: no es necesario utilizar el carácter de barra vertical (|) después del último parámetro.	chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| 1:|0|100| 2:|A|B|C| 3:|2005|2006|2007
	Igual que el anterior, sólo que las etiquetas del eje y izquierdo (y) no se han especificado (el índice 1: no se incluye en el parámetro chxl). Nota: no es necesario utilizar el carácter de barra vertical (|) después del último parámetro.	chxt=x,y,r,x chxl= 0:|Jan|July|Jan|July|Jan| (y-axis omitted) 2:|A|B|C| 3:|2005|2006|2007

Volver al principio

Posiciones de la etiqueta del eje

Para especificar las posiciones de la etiqueta, utiliza

chxp=
<axis index>,<label 1 position>,<label n position>|

...
<axis index>,<label 1 position>,<label n position>

Utiliza números de punto flotante para los valores de posición. Para separar datos de ejes distintos, utiliza el carácter de barra vertical (|). Si se omiten las etiquetas (chxl), el texto de la etiqueta se tomará del valor de posición.

Parámetro	Descripción	Ejemplo
chxp	Este ejemplo muestra los ejes y derecho e izquierdo (y y r) y un eje x (x). El eje x (índice 0) no tiene posiciones ni etiquetas. Por lo tanto, el API de Chart asume un intervalo de 0 a 100 y espacia los valores uniformemente. El eje y izquierdo (y) tiene tanto etiquetas (mín., promedio y máx.) como posiciones (10,35,75). El eje y derecho (r) sólo tiene posiciones (0,1,2,4), por lo que el API de Chart utiliza las posiciones como etiquetas.	chxt=x,y,r chxl=1:|min|average|max chxp=1,10,35,75|2,0,1,2,4

Volver al principio

Intervalo de ejes

Para especificar un intervalo, utiliza

chxr=
<axis index>,<start of range>,<end of range>|
...
<axis index>,<start of range>,<end of range>

Para separar varios intervalos de eje, utiliza el carácter de barra vertical (|).

Parámetro	Descripción	Ejemplo
chxr	Este ejemplo muestra los ejes y derecho e izquierdo (y y r) y un eje x (x). Cada eje tiene un intervalo definido. Dado que no se ha especificado ninguna etiqueta ni posición, los valores se espaciarán uniformemente y se tomarán del intervalo proporcionado. Nota: la dirección del eje se invierte en el eje y izquierdo (r) ya que el primer valor (1000) es mayor que el último (0).	chxt=x,y,r chxr=0,100,500| 1,0,200| 2,1000,0
	En ese ejemplo sólo se ha definido el eje x (x). Este eje tiene intervalo, etiquetas y posiciones, por lo tanto, se utilizan los tres conjuntos de valores.	chxt=x chxr=0,100,500 chxl=0:|200|300|400 chxp=0,200,300,400

Volver al principio

Estilos de ejes

Para especificar el tamaño de fuente, el color y la alineación de las etiquetas de ejes, utiliza

chxs=
<axis index>,<color>,<font size>,<alignment>|
...
<axis index>,<color>,<font size>,<alignment>

donde:

• <axis index> es el índice del eje tal como se especifica en chxt.
• <color> es un número hexadecimal en formato RRGGBB.
• <font size> es opcional. Si se utiliza, indica el tamaño en píxeles.
• <alignment> es opcional. De forma predeterminada: las etiquetas del eje x están centradas, las etiquetas del eje y izquierdo están alineadas a la derecha, las etiquetas del eje y derecho están alineadas a la izquierda. Para especificar la alineación, utiliza 0 para centrar, -1 para la alineación a la izquierda y 1 para la alineación a la derecha.

Para separar varios valores, utiliza el carácter de barra vertical (|).

Parámetro	Descripción	Ejemplo
chxs	Se especifican el tamaño de fuente, el color y la alineación para el segundo eje x.	chxt=x,y,r,x chxr=2,0,4 chxl=3:|Jan|Feb|Mar|1:|min|average|max chxp=1,10,35,75 chxs=3,0000dd,13
	Se especifican el tamaño de fuente, el color y la alineación para ambos ejes x.	chxt=x,y,r,x chxl=3:|Jan|Feb|Mar||      0:|1st|15th|1st|15th|1st chxs=0,0000dd,10|3,0000dd,12,1

Volver al principio

Estilos

Están disponibles los siguientes estilos:

• Espaciado y ancho de barras
• Línea cero de gráfico de barras
• Estilos de línea
• Líneas de cuadrícula
• Marcadores de forma
• Marcadores de intervalo horizontales
• Marcadores de intervalo verticales

Espaciado y ancho de barras

Para especificar el grosor y el espaciado de los gráficos de barras, utiliza
chbh=
<bar width in pixels>,
<optional space between bars in a group>,
<optional space between groups>

Parámetro	Descripción	Ejemplo
chbh	En el primer ejemplo, el ancho de barra está establecido en 10 píxeles, el valor predeterminado del espacio entre las barras es de 4 píxeles, y el valor predeterminado del espacio entre los grupos es de 8 píxeles. En el segundo ejemplo, el ancho de barra está establecido en 10 píxeles, el espacio entre las barras es de 5 píxeles y el espacio entre los grupos es de 15 píxeles. Ten cuidado si sólo proporcionas dos valores. En el tercer ejemplo, el espacio entre las barras se ha establecido en 8 píxeles. Dado que éste es el valor predeterminado del espacio entre los grupos, la distinción visual se pierde por completo. Si se especifica un valor mayor que 8 será incluso peor, ya que las barras erróneas se agruparán.	cht=bhg chbh=10 cht=bvg chbh=10,5,15 cht=bhg chbh=10,8 cht=bhg chbh=10,15

Volver al principio

Línea cero de gráfico de barras

Para especificar una línea cero de gráfico de barras, utiliza

chp=
<value between 0 and 1 for dataset 1>,
<value between 0 and 1 for dataset n>

Especifica sólo un valor para aplicar la misma línea cero a todos los conjuntos de datos.

Parámetro	Descripción	Ejemplo
chp	En este ejemplo un valor chp de .5 sitúa la línea cero en la mitad del gráfico. Este gráfico utiliza una codificación de texto, por lo que: un punto de datos con un valor comprendido entre 0 y 49 se representará por debajo de la línea cero. un punto de datos con el valor 50 se representará en la línea cero (que es invisible, ver tercer punto de datos del ejemplo). un punto de datos con un valor comprendido entre 51 y 100 se representará por encima de la línea cero.	chp=.5 chd=t:20,35,50,10,95
chds	Otra forma de establecer una línea cero es utilizar el parámetro de escala de datos (chds) junto con la combinación de texto. En el ejemplo se muestra un conjunto de datos comprendido entre -60 y 120 y una escala de -80 a 140 para dejar espacio por encima y por debajo de las barras. Para obtener más información, consulta Codificación de texto con escala de datos.	chd=t:30,-60,50,120,80 chds=-80,140

Volver al principio

Estilos de línea

Se pueden especificar estilos de línea de:

• Gráficos de líneas y palabra gráfica: especificando el estilo del espaciado y el grosor (y el color con colores de conjuntos de datos)
• Gráficos de líneas, palabra gráfica y barras: especificando el grosor, el color y la prioridad

Estilos de línea y palabra gráfica

Para especificar los estilos de línea y palabra gráfica, utiliza

chls=
<data set 1 line thickness>,<length of line segment>,<length of blank segment>|
...
<data set n line thickness>,<length of line segment>,<length of blank segment>


Los valores de los parámetros son números de punto flotante, los distintos estilos de línea se separan mediante el carácter de barra vertical (|). El primer estilo de línea se aplica al primer conjunto de datos, el segundo estilo al segundo conjunto, y así sucesivamente.

Parámetro	Descripción	Ejemplo
chls	En este ejemplo, la línea discontinua gruesa viene especificada por 3,6,3 y la línea continua más fina por 1,1,0. Para obtener información sobre cómo especificar colores de línea, consulta Colores de gráfico.	chls=3,6,3|1,1,0

Volver al principio

Estilos de gráficos de líneas, palabra gráfica y barras

Para especificar estilos de gráficos de líneas, palabra gráfica y barras, utiliza

chm=D,<color>,<data set index>,<data point>,<size>,<priority>

donde:

• <color> es un número hexadecimal en formato RRGGBB.
• <data set index> es el índice del conjunto de datos sobre los que se representa la línea. Es 0 para el primer conjunto de datos, 1 para el segundo, y así sucesivamente.
• <data point> es cero.
• <size> es el tamaño del marcador en píxeles.
• <priority> determina el orden en el que se representan las barras, las líneas, los marcadores y el relleno:
  1 especifica que la línea se representa encima de las barras y de los marcadores.
  0 es el valor predeterminado, que especifica que la línea se representa encima de las barras y debajo de los marcadores.
  -1 especifica que la línea se representa debajo de las barras y de los marcadores.

Parámetro	Descripción	Ejemplo
chm=D	Éste es un ejemplo de una línea de datos en un gráfico de barras: La prioridad se ha establecido en 1, por lo que la línea aparece delante de las barras.	chm= D,4D89F9,0,0,5,-1
	Éste es un ejemplo de una palabra gráfica: Las palabras gráficas son idénticas a los gráficos de líneas. La única diferencia que presentan respecto a los gráficos de líneas es que no tienen ejes de forma predeterminada, pero sus funciones son exactamente iguales.	chm= D,C6D9FD,1,0,8| D,4D89F9,0,0,4

Volver al principio

Líneas de cuadrícula

Para especificar una cuadrícula, utiliza

chg=
<x axis step size>,
<y axis step size>,
<length of line segment>,
<length of blank segment>

Los valores de los parámetros pueden ser números enteros o bien tener un solo decimal, por ejemplo, 10.0 ó 10.5.

Parámetro	Descripción	Ejemplo
chg	Ejemplo en el que se define únicamente el tamaño del incremento (20,50) de manera que el API de Chart utilizará el valor predeterminado de una línea de cuadrícula discontinua.	chg=20,50
	Aquí se definen el tamaño de incremento (20,50), el segmento de la línea (1), y el segmento en blanco (5).	chg=20,50,1,5
	Para crear una cuadrícula continua sólo se deberá especificar un segmento en blanco de cero (0).	chg=20,50,1,0

Volver al principio

Marcadores de intervalo y forma

Para especificar los marcadores de forma y los marcadores de intervalo horizontales y verticales de los gráficos de puntos, barras, radar y líneas, utiliza chm

• Marcadores de forma
• Marcadores de intervalo

Marcadores de forma

Para especificar los marcadores de forma, utiliza

chm=
<marker type>,<color>,<data set index>,<data point>,<size>,<priority>|
...
<marker type>,<color>,<data set index>,<data point>,<size>,<priority>

Donde:

• <marker type> is one of the following characters:
  a represents an arrow.
  c represents a cross.
  d represents a diamond.
  o represents a circle.
  s represents a square.
  t represents text.
  v represents a vertical line from the x-axis to the data point.
  V represents a vertical line to the top of the chart.
  h represents a horizontal line across the chart.
  x represents an x shape.
  
  
• <color> es un número hexadecimal en formato RRGGBB.
• <data set index> es el índice de la línea en la que se va a representar el marcador. Es 0 para el primer conjunto de datos, 1 para el segundo, y así sucesivamente.
• <data point> para todos lo