26Jul 2009 3 Comments */?>

Crear gráficos dinámicos con JQuery Visualize

Categorías: JQuery, Recursos - Tags: ,

Hoy dando una vuelta por la web de Andrés Nieto me encontre con este peculiar plugin llamado JQuery Visualize que se encarga de formar gráficas a partir de los datos de una tabla. Entre sus posibilidades podemos encontrar desde barras normales , areas, gráficas en queso , etc y lo mejor de todo es que si el visitante no dispone de Javascript podra ver la tabla en vez de la gráfica.
jquery.visualize

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.

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Gabriel

    Muy bueno, lo estoy usando junto con php mysql y funciona prefecto, buen material, Gracias!!!

  • Pedro

    Buenas. Sabrías si existe algo similar para dibujar áreas?

  • Douglas

    Esto es libre o pago?