aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

(Ver Imagen)

Usando los datos alojados en tablas el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos. Posibilitando así su comprensión.

¿Como funciona?

<table>
	<caption>2009 Individual Sales by Category</caption>
	<thead>
		<tr>
			<td></td>
			<th>food</th>
			<th>auto</th>
			<th>household</th>
			<th>furniture</th>
			<th>kitchen</th>
			<th>bath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Mary</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Tom</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		...repetitive rows removed for brevity.	
	</tbody>
</table>

Usando una estructura de tabla normal, almacenamos los datos en ella y posteriormente el plugin los usará para generar el gráfico con estos valores.

$('table').visualize({options});

Opciones

• type: string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
• width: number. Ancho de la gráfica. Por defecto el tamaño de la tabla.
• height: number. Altura de la gráfica. Por defecto el tamaño de la tabla.
• appendTitle: boolean. Añadir título a la gráfica. Default: true.
• title: string. Título de la gráfica. Por defecto se usa el <caption /> de la tabla.
• appendKey: boolean. Añadir color principal. Default: true.
• colors: array. Array de colores usados. Default: [‘#be1e2d’,’#666699′,’#92d5ea’,’#ee8310′,’#8d10ee’,’#5a3b16′,’#26a4ed’,’#f45a90′,’#e9e744′]
• textColors: array. Array de colores para el texto. Default: [].
• parseDirection: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.
• pieMargin: number.Espacio alrededor de la gráfica tipo «Pie». Default: 20.
• pieLabelPos: string. Posición del texto de etiqueta en la gráfica tipo «Pie». Acepta ‘inside’ y ‘outside’. Default: ‘inside’.
• lineWeight: number. Tamaño de la línea de la gráfica. Default: 4.
• barGroupMargin: number. Espacio entre barras. Default: 10.
• barMargin: number.Margenes de la gráfica. Default: 1

Podeis ver una gráfica dinámica y descargar el plugin directamente desde este enlace.