Introducción a la creación de gráficos – Flot Charts I

ACTUALIZACIÓN 15/07/2014: he añadido la visualización de los gráficos de ejemplo para que compruebes si obtienes los mismos resultados

En una entrada anterior te mostré cinco librerías javascript que podías utilizar para crear gráficos en una página Web. Hoy voy a comenzar a mostrarte como puedes utilizar Flot Charts para crear gráficos atractivos, dinámicos y que además permitan la interacción, mejorando de esta forma la experiencia de uso al usuario.

Para seguir los ejemplos que voy a ir explicándote a lo largo de la entrada de hoy, tienes que crear un directorio en cualquier ubicación de tú equipo y dentro de ese directorio crear un primer archivo HTML que será sobre el que trabajarás. Yo he creado la carpeta pruebas_graficos y dentro de ella el archivo graficos.html que será con el que comenzaré para mostrarte los ejemplos de este post.

A continuación tienes que visitar la página de la librería y descargarte la última versión (hay un enlace a la descarga publicado en la página principal), guarda el archivo zip en el directorio que has creado para las pruebas y descomprímelo. En el directorio tendrás ahora el archivo graficos.html y el directorio flot que se ha creado al descomprimir la descarga  y que contiene todos los ficheros necesarios para la creación de gráficos.

Una vez que ya tienes la estructura de directorios, lo primero que tendrás que hacer es editar el archivo HTML que has creado anteriormente y añadir la referencia a la librería Flot. Esta librería depende de jQuery, por lo que si no tenías la referencia previamente, añádela utilizando el archivo jQuery que se encuentra en el directorio Flot. También añade la línea que se muestra comentada a continuación, que habilita el soporte de Flot para Internet Explorer 8.

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>

Con las referencias añadidas, lo siguiente que vas a hacer es añadir un elemento div sin contenido en el que se dibujarán los datos del gráfico. Muy importante, hay que asignarle un ancho y un alto al elemento div para que se dibuje el gráfico correctamente. Puedes hacerlo en el propio elemento o a través de css.

<style type="text/css">
   #grafico{ width: 600px; height: 400px;}
</style>
...
<div id="grafico" ></div>

Llegados a este punto ya puedes hacer uso de la librería Flot y dispones del contenedor que albergará las imágenes, así que puedes dibujar tú primer gráfico. Para ello utiliza el siguiente código javascript que dibujará una línea que pasa por los puntos [0,0] y [7,7]. Con la función $.plot se indica el elemento que alojará el gráfico como primer argumento y los datos a dibujar en el segundo argumento.

$(function(){
		var d1 = [[0,0],[7,7]];
		$.plot("#grafico", [d1]);
});




Como resultado habrás podido observar que se ha dibujado una línea amarilla pasando por los puntos indicados, las escalas de los ejes x e y se han ajustado automáticamente a los datos con los que estás trabajando. Por defecto la presentación de los ejes se ajustará al máximo según los datos que se están presentando. Si hace pruebas con el ejemplo anterior utilizando diferentes puntos podrás visualizar esta característica.

Propiedades de las series de datos

Lo primero que debes tener en cuenta a la hora de especificar el valor de un punto en el gráfico, es que tienes usar números y el separador decimal a utilizar es el punto (.).

Una conjunto o serie de datos en Flot posee una determinadas características que te permitirán especificar la forma en la que se presenta el gráfico y de este modo poder personalizarlo según tus necesidades:

  • color: permite indicar el color a través de un número, el nombre o el código html. (Ejem: color: 8; color: "#GG44EE"; color: "Red")
  • data: array de puntos que representan los valores de la serie (Ejem: data: [[0,0],[7,7]])
  • label: texto a mostrar en la leyenda para la serie de datos. (Ejemp: label: "Temperatura ºC")
  • lines: propiedades de las líneas del gráfico. Entraré en detalle en otra entrada más adelante
  • bars: propiedades de las barras. Entraré en detalle en otra entrada más adelante
  • points:propiedades de los puntos del gráfico. Entraré en detalle en otra entrada más adelante
  • xaxis: en caso de disponer de más de un eje X, el número al que está vinculado
  • yaxis:en caso de disponer de más de un eje Y, el número al que está vinculado
  • clickable: true o false, indica si para la serie se dispara el evento click. Se utilizará con al interacción
  • hoverable:true o false, indica si para la serie se dispara el evento hover. Se utilizará con al interacción
  • shadowSize:tamaño de la sombra de la línea
  • highlightColor:color utilizado cuando se establece la serie como activa o highlighted si el gráfico ha activado al opción

A continuación te muestro el código para representar dos gráficos, uno con la temperatura y otro con las precipitaciones. He utilizado las propiedades anteriores para dar un nombre a cada uno de los gráficos, establecer el color que yo he elegido, a qué eje Y están vinculado cada uno para ajustar la escala y por último he seleccionado una sombra de línea diferente para cada uno de ellos. A la hora de dibujar las series de datos, las pasamos como un array a la función $.plot.

var d1 = {
	label: "Temperatura (ºC)",
	color: "Red",
	yaxis: 1,
	shadowSize: 10,
	data: [[16,20],[17,20.5],[18,22.8],[19,21.5],[20,19.8],[21,17.3]]
};
var d2 = {
	label: "Precipitación (mm)",
	color: "Blue",
	yaxis: 2,
	shadowSize: 20,
	data: [[16,0],[17,1],[18,3],[19,9.2],[20,10],[21,6.9]]
}
$.plot("#grafico", [d1,d2]);



Personalizando la leyenda

Si has implementado el ejemplo anterior, habrás observado que automáticamente se ha incluido la leyenda del gráfico. Al igual que las series de datos, los gráficos poseen un conjunto de propiedades que se pueden personalizar y la leyenda es una de ellas, que a su vez también posee sus propiedades que permiten personalizarla:

  • show: true o false, indica si se muestra o no
  • labelFormatter: referencia función que se utilizará para dar formato a la leyenda.
  • labelBoxBorderColor: color del borde
  • noColumns: nº de columnas a utilizar, por defecto 1
  • position: posición de la leyenda. “ne” o “nw” o “se” o “sw”
  • margin: margen en pixeles al borde del gráfico. También se puede especificar como dos márgenes [x,y]
  • backgroundColor: color de fondo
  • backgroundOpacity: nivel de transparencia. (entre 0 y 1)
  • container: expresión jQuery para referirnos a otro contenedor en el que ubicar la leyenda.(Ejem: $('#leyenda')
  • sorted: true, “ascending”, “descending”, “reverse” para indicar la forma de ordenación

A continuación te muestro un ejemplo con la leyenda personalizada utilizando varias columnas y colocándola en un lugar diferente del gráfico. Las opciones se definen en una variable aparte y se pasan como tercer parámetro a la función $.plot que pinta el gráfico.

...
var options = {
	legend: {
		show: true,
		noColumns: 2,
		margin: 20,
		position: "sw"
	}
}
$.plot("#grafico", [d1,d2], options);

Y por último si quieres dibujar la leyenda fuera del gráfico en otro contenedor puedes utilizar algo similar a lo siguiente:

...
var options = {
	legend: {
		show: true,
		noColumns: 2,
		margin: 20,
		container: $('#leyenda')
	}
}
$.plot("#grafico", [d1,d2], options);
...
<h1>Gráficos con Flot</h1>
<div id="grafico" ></div>
<h2>Leyenda</h2>
<div id="leyenda"></div>

Con este post he comenzado la serie de entradas sobre cómo realizar gráficos con Flot, así que espero que te sean de utilidad.

Si te ha parecido interesante y no quieres perderte ninguna entrada futura, no olvides suscribirte a mi lista de correo para recibir las últimas actualizaciones y noticias sobre el blog.

Comentarios
  1. marina

    excelente informacion, gracias

  2. Lo que sería la caña después del post, sería una demo empotrada para que se pueda ver directamente. Bueno, sí, tenemos la página de flotcharts, pero bueno, estaría chulo 🙂

    • La entrada del siguiente lunes comienza: “Si seguiste los ejemplos que te mostré el lunes pasado, habrás llegado a tener un gráfico como el siguiente… ” y ahí el gráfico empotrado.

      Estoy preparando una modificación en mi WP para meter la librería sólo en aquellos post que quiero mostrar gráficos y también haré un pequeño post sobre ello.

      • Soraya

        Al final no hemos visto el gráfico

        • marina

          yo segui en tutorial al pie de la letra y si esta bien, debe ser algún error pequeño verificalo

      • marina

        necesito realizar gráficos cuyos datos sean tomados de sql y mostrados tendrás algún ejemplo. no utilizare mysql

AGREGAR COMENTARIO