Creación de gráficas de barras con Javascript

  • Por
A partir de la importación de una libreria apropiada, podemos realizar gráficas de barras. Veremos que librería importar y como manipular el código para conseguir nuestro objetivo.
Vamos a presentar un sistema para realizar gráficas de barras en páginas web, con la ayuda de Javascript. Sin duda, cualquier persona podrá encontrar varias soluciones para este problema, aunque nosotros vamos a recomendar una que de verdad nos puede simplificar mucho la vida y que no requiere de ningún requisito especial. Simplemente que el navegador del visitante soporte Javscript.

Las gráficas de barras sirven para hacer muchas cosas y es una de las tareas típicas se puede necesitar en un proyecto un poco avanzado. Generalmente se utilizan para mostrar resultados de informes, estadísticas o temas similares de una manera muy visual.

Imagen de una de las gráficas que se pueden generar con este mecanismo.

Con el siguiente ejemplo vamos a aprender a hacer graficas dinámicamente, es decir, que se construyen con unos datos que pueden ser variables. Si la gráfica fuera siempre a construirse con los mismos datos, podríamos crearla con algún programa como el Excel y luego convertirla en imagen y presentarla dentro de la web. Sin embargo, es muy habitual que los datos se extraigan de una fuente como una base de datos o algo similar, donde pueden variar con el tiempo. En este caso, cada vez que se imprima la página, se debería acceder a la base de datos, extraer la información y generar la gráfica dinámicamente.

BAR_GRAPH

El sistema que presentamos aquí se llama BAR_GRAPH y sirve para generar gráficas de barras de distintos tipos con la ayuda de Javascript. Las gráficas tienen un aspecto visual muy adecuado y son totalmente personalizables, pudiendo configurar el sistema para que muestre gráficas horizontales, verticales y de progreso. También incluye la posibilidad de crear etiquetas, leyendas, agrupar ciertos valores, utilizar colores distintos, etc.

El producto es gratuito para uso personal, aunque si se utiliza de manera comercial, el autor solicita que se haga una donación de 6 euros, a través de Paypal.

Para la creación de las gráficas no se necesita de ningún material, excepto unas librerías Javascript que son las que ofrecen todas las funcionalidades de creación de gráficas.

Para incluir la librería en nuestras páginas web, basta con descargarla del sitio web del autor del producto: http://www.gerd-tentler.de/tools/graphs/ y llamarla desde nuestros scripts.

Para incluir una librería Javascript, lo habitual es colocar en la cabecera de la página una llamada al archivo donde está el código. Algo como esto:

<head>   
<title>Ejemplo de gráficas</title>   
<script src="graphs.js" type="text/javascript"></script>
</head>


Nos fijamos que se incluye un archivo llamado graphs.js que se supone estará en el mismo directorio que la página web. Dentro de ese archivo encontraremos la declaración de un objeto que será el encargado de recibir los datos de origen con los que se desea construir la gráfica y también de mostrarla cuando se hayan introducido todos los datos iniciales.

Para crear y mostrar una gráfica, lo único que tenemos que hacer es instanciar el objeto gráfica, insertarle los valores iniciales y llamar al método que hace que se muestre la gráfica.

Se puede ver un ejemplo a continuación de las instrucciones iniciales de creación de la gráfica:


//instanciamos la gráfica
graph = new BAR_GRAPH("hBar");
//insertamos valores
graph.values = "380,150,260,310,430";
//mostramos la gráfica en la página
document.write(graph.create());


Se puede complicar un poco más este sistema para incorporar, por ejemplo, dos tandas de valores, agrupadas en dos grupos.

//instanciamos la gráfica
graph = new BAR_GRAPH("hBar");
//definimos las etiquetas que acompañarán a cada pareja de valores
graph.labels = "Jan.,Feb.,Mar.,Apr.,May";
//inicializamos los datos. 1 elemento tiene un grupo de dos valores.
graph.values = "380;420, 150;340, 260;120, 310;250, 430;370";
//definimos una leyenda
graph.legend = "2001,2002";
//mostramos la gráfica en la página
document.write(graph.create());


Estos dos ejemplos de gráficas se pueden ver en una página aparte. Si deseamos ver muchos más ejemplos de gráficas posibles sería muy interesante que accediéramos a la página del producto, donde veremos los tipos de gráficas más habituales que se pueden realizar. http://www.gerd-tentler.de/tools/graphs/

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Fernando

11/8/2004
Excelente contribución. El artículo de como hacer gráficos con Java Script está bien planteado y es muy didactico. Felicitaciones.
Fernando Díaz
Perú

nagi

02/7/2006
hermano una aclaratoria, el archivo que mencionas para descargar no es .js, lo descargué y el archivo asociado no está en javascript, está en php(.inc) con esto quiero decir que eso no tiene nada de javascript. Solo hay que incluir esa libreria y llamar a las funciones desde otra pagina html. chao

zuleima

09/6/2009
dar gracias
muchas gracias a la persona que creo esto estubo muy bien porque esto fue de una gra ayuda para un trabajo muchas gracias bueno pues tampoco esde rendirle homenaje pero si estubo muy bueno ............... buenicimo

TyrantRC

24/11/2009
Corrigiendo al de arriba
Acabo de descargarme el archivo desde el link que puso el autor del articulo y efectivamente si es un .js. Esta en la parte de download de la web del desarrollador de ese script, aprendan a descargar u.u.

Juan Villarruel

24/5/2011
Agradecimientos !!!
Exelente articulo.

maria

21/7/2012
quien invento el grafico de barras?
gracias por aclarar como crear un grafico de barras pro tengo la duda de quien invento el grafco de barras?