Graficas sencillas con protoChart

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

2 Responses to “Graficas sencillas con protoChart”


  1. 1 Chus1986 enero 12, 2009 en 11:26 am

    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

  2. 2 Reynaldo Pizarro marzo 12, 2013 en 5:33 pm

    Esta muy bien, pero en vez de que me muestre el porcentaje, quiero que me muestre el número entero ejemplo que mi 100% es de 30 elementos, quiero ver 30 elementos en lugar de 100%


Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s





The next version of Ubuntu is coming soon


¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map
agosto 2008
L M X J V S D
« jul   sep »
 123
45678910
11121314151617
18192021222324
25262728293031

Blog Stats

  • 26,735,278 hits

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.040 seguidores

%d personas les gusta esto: