De Wikillerato

Gráfica de barras básica

Para dibujar gráficas de barras inserta tus datos entre <bars> and </bars> (también puedes utilizar <lines> y <pie> para otros tipos de gráficas).

Si incluyes este código:

 <bars title="Visitas Wiki">
 5345
 3452
 7843
 </bars>

Se dibujará:

AVISO: Por defecto el eje Y se autoescala entre sus valores máximos y mínimos. Esa es la razón por la que la segunda barra no se muestra.

Configurando el eje Y

Si deseas configurar manualmente los valores máximo y mínimo del eje Y (no es obligatorio especificar ambos límites):

 <bars title="Visitas Wiki" ymin=0 ymax=8000>
 5345
 3452
 7843
 </bars>

Barras con valores múltiples

Puedes poner más de un valor si separas los datos por una coma. Para mayor claridad debes de asignar un color diferente a cada valor:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00>
 4115,1230
 2541,911
 5410,2433
 </bars>

Si prefieres que los distintos valores estén apilados y no uno al lado del otro debes incluir el parámetro "stacked":

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked>
 4115,1230
 2541,911
 5410,2433
 </bars>

Incluir etiquetas en el eje Y

Para tener un idea más precisa de los valores en cada barra es conveniente incluir etiquetas en el eje Y. En este ejemplo que incluyen 4 valores:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 Oct,4115,1230
 Nov,2541,911
 Dic,5410,2433
 </bars>

Incluir etiquetas en el eje X

Si se incluye el parámetro xlabel la primera columna de los datos se toma como etiqueta para los mismos:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel>
 Oct,4115,1230
 Nov,2541,911
 Dic,5410,2433
 </bars>

Incluir una leyenda

Cuando la gráfica tiene más de un valor por barra es necesario añadir una leyenda explicativa. Esto se consigue utilizando el parámetro "legend" e incluyendo las etiquetas en la primera fila de datos.

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>

AVISO: Si se utilizan tambien etiquetas para el eje X la primera entrada debe estar vacía.

Barras horizontales

Puedes cambiar la orientación de las barras incluyendo el parámetro "horizontal":

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>

AVISO: al girar la gráfica las etiquetas del eje Y se dibujan en el eje X y viceversa.

Dibujando una retícula

Puede ser más sencillo visualizar los valores de una gráfica si dibujamos una retícula bajo la misma. Puedes poner líneas para ambos ejes, pero normalmente queda mejor si solo se incluyen para el eje Y:

 <bars title="Visitas Wiki" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal grid=y>
    ,EU  ,US
 Oct,4115,1230
 Nov,2541, 911
 Dic,5410,2433
 </bars>

Enlaces externos=

Ayuda gráfica de barras