 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Directorio
|
Manuales
|
Scripts
|
FAQs
|
Programas
|
Artículos Copyleft
|
Actualidad
|
La Cosecha
|
Colabora
Alojamiento
|
Dominios.es
|
Micropagos SMS
|
Buscadores
|
Patentes, marcas
|
Creación web
|
Multimedia
|
Videos
Creación de gráficas de barras con Javascript
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.
27/7/04 - 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/
Seguir navegando a partir aquí:
+ 1 manual relacionado+ 1 categoria relacionada
+ 7 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Dentro de Taller de Javascript
Siguiente: Juegos en Javascript
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
