La forma en que funciona es muy sencilla. Dada una tabla cualquiera como :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<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>
		...Las columnas repetidas las saco por brevedad
	</tbody>
</table>

Tan solo hay que llamar al plugin de la siguiente forma y el plugin se va a encargar de generar la gráfica a partir de los datos introducidos.

1

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

Además podemos definir las siguiente 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
  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

Pueden ver una gráfica dinámica desde este enlace o descargar el plugin directamente.
Un saludo a todos.

Sigueme:

]]> http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/feed/ 2