SummArg | Cursos y recursos para webmasters

09/12/2010

Gráficos de barras, líneas, torta y otros con jQuery

gvChart es un plugin para jQuery que nos permite tomar la información de una tabla y convertirla a un tipo de gráfico, utiliza Google Charts. Las gráficas traen incorporadas un tooltip que al pasar el puntero del mouse por cada sector nos despliegan la información específica.

Pueden ver un demo en este link en donde se exponen todos los tipos de gráficas.

La implementación de este script es muy sencilla, en principio se deben descargar los archivos necesarios desde este link.

La tabla debe poseer las siguientes características:

  • Debe tener el elemento caption, que será utilizado como título de la gráfica.
  • Debe estar dividida en dos partes: thead y tbody.
  • En el elemento thead debe exitir una fila con elementos th que serán usados como argumentos en el eje X.
  • En el elemento tbody se ubicarán las filas de datos.

Ejemplo:

				<table id='myTable'>
					<caption>Juegos</caption>
					<thead>
						<tr>
							<th></th>
							<th>Jan</th>
							<th>Feb</th>
							<th>Mar</th>
						</tr>
					</thead>
						<tbody>
						<tr>
							<th>2010</th>
							<td>125</td>
							<td>185</td>
						</tr>
						<tr>
							<th>2009</th>
							<td>1167</td>
							<td>1110</td>
						</tr>
					</tbody>
				</table>

Entre etiquetas <head> colocaremos:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-1.0.min.js"></script>

Es importante que jsapi sea el primero en cargar o no funcionará correctamente. Luego se inicializa el script y se conecta a la tabla que tenga el id myTable, indicando en el proceso cuales serán las opciones de dicha gráfica.

<script type="text/javascript">
	gvChartInit();
jQuery('#myTable').gvChart({
	chartType: 'ColumnChart',
	gvSettings: {
		vAxis: {title: 'Jugadores'},
		hAxis: {title: 'Mes'},
		width: 720,
		height: 300,
		}
});
</script>

Pueden leer mas en la web del autor.

Dejar un comentario