Librerías JavaScipt para crear de gráficas

Cada vez son más las librerias para JavaScript que nos permiten crear gráficas en nuestras páginas web. Hoy os presentamos un pequeña colección con algunas de ellas.

Google Chart API: Como es lógico a Google no le podía faltar una librería para este tipo de cosas. Google Chart API es diferente a otras APIs en el sentido en que nosotros invocamos una URL con unos determinados parámetres y Google nos devuelve una imagen. Por ejemplo, dada la URL:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Los servidores de Google construyen y nos devuelven la imagen:

jqPlot: Basada en la librerías jQuery. Utiliza el concepto “típico” de la creación de gráficas, es decir, declaras e inicializas unas variables y jqPlot las visualiza. Todo se realiza en el lado del cliente al contrario que con Google Chart API. Por ejemplo:

var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
   cosPoints.push([i, Math.cos(i)]);
}
plot2 = $.jqplot('chart2', [cosPoints], {
    title:'Shadow Options',
    series:[
        {
            showMarker:false,
            lineWidth:5,
            shadowAngle:0,
            shadowOffset:1.5,
            shadowAlpha:.08,
            shadowDepth:6
        }
    ]
});

Da como resultado:

jQuery Visualize Plugin: Es similar al plugin anterior pero con la diferencia que “parsea” elementos HTML (como tablas) y los representa en modo gráfico. Además hace uso del nuevo elemento canvas de HTML5. A partir de la tabla siguiente:

<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>

El plugin genera:

PlotKit: Similar a los anteriores pero basado en MochiKit. Su funcionamiento es similar a jqPlot, en el sentido que las gráficas se generan a partir de variables (y no elementos HTML):

function demo() {
   var hasCanvas = CanvasRenderer.isSupported();

   var opts = {
   "pieRadius": 0.4
   };

   var data1 = [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]];
   var data2 = [[0, 2.5], [1, 2], [2, 1.5], [3, 2.5], [4, 3], [5,
   3.5]];
   var data3 = [[0, 1.25], [1, 1], [2, 0.75], [3, 1.25], [4, 1.5], [5, 1.75]];

   if (hasCanvas) {
       var pie = new EasyPlot("pie", opts, $('canvaspie'), [data1]);
       var line = new EasyPlot("line", opts, $('canvasline'), [data1, data2, data3]);
       var bar = new EasyPlot("bar", opts, $('canvasbar'), [data1, data2, data3]);
   }
}

Da como resultado:

Entradas relacionadas:

1. 5 librerías para crear gráficas con jQuery
2. 15 plugins jQuery para crear galerías de imagenes
3. Pencil Project, una herramienta para crear prototipos GUI
4. Herramienta para crear tutoriales para NetBeans
5. Competición de Google para crear modelos de ciudades