El otro dia lei este post de Anieto2K y me he animado a probar ProtoChart. ProtoChart es una libreria OpenSource que mediante el uso de la libreria Prototype y Canvas permite crear rapidamente diferentes tipos de graficas para nuestras aplicaciones web. Veamos un ejemplo rapido, bonito y barato de como crear un grafico de tarta. Lo primero es incluir en la cabecera de nuestro codigo HTML las librerias javascript necesarias, librerias que podemos descargar desde el sitio de ProtoChart:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Probando protoChart</title>
<script src="prototype.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="ProtoChart.js"></script>
Ahora definimos los datos que queremos añadir al grafico de tarta:
<script> var d1 = [[0, 1]]; var d2 = [[0, 1]]; var d3 = [[0, 1]]; var d4 = [[0, 1]]; var d5 = [[0, 1]]; var d6 = [[0, 1]]; var d7 = [[0, 6]]; </script>
Estos valores son parejas de valores (x,y), en este tipo de grafica de tarta, el valor de la coordenada x nos es indiferente (aqui la he dejado con valor 0) y solo tendra en cuenta el valor de la y. Para otro tipo de graficas si que deberas definir una variable con el conjunto de valores deseados, por ejemplo:
var a1 = [ [0,0],[10,100],[20,1000] ]
Y bien, ya cargadas las librerias y definidos los datos, solo tendriamos que invocar al siguiente metodo para dibujar la grafica:
<div id="piechart" style="width:500px;height:300px"></div>
<script>
Event.observe(window, 'load', function() {
new Proto.Chart($('piechart'),
[
{ data: d1, label: "Enero"},
{ data: d2, label: "Febrero"},
{ data: d3, label: "Marzo"},
{ data: d4, label: "Abril"},
{ data: d5, label: "Mayo"},
{ data: d6, label: "Junio"},
{ data: d7, label: "Julio"}
],
{
/*
This is how we tell the Chart engine that we
need a pie chart and it ignores all inline options
that you might have passed with the datasets.
*/
pies: {show: true, autoScale: true},
legend: {show: true}
});
});
</script>
Fijate que en la “label” puedes poner las etiquetas que quieres mostrar, y que “Piechart” es el identificador de un div que es donde se mostrara realmente la grafica. si quieres usar otras graficas o cambiar el nombre de la misma, tendras que añadir los div con los identificadores correspondientes.
El resultado, es el siguiente:
Como deciamos: Facil, bonito y barato… En la pagina web de Protochart puedes ver mas ejemplos de las diferentes graficas que se pueden generar.
Enlace | ProtoChart
Estoy trabajando con protochart y struts, al recuperar los datos de la bbdd, si uno de los valores de la grafica de tarta es 0 el primer dato lo cambia de color. ¿Habría alguna forma de controlar ese error? muchas gracias