Crear gráficos dinámicos con JQuery Visualize
Categories: JQuery, Recursos - Tags: graficas, jquery.pluginHoy 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.
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.
)
