Visualizando datos con Flot

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Existen muchos tutoriales sobre cómo crear gráficos de barras con CSS. Pero, en ocasiones, los gráficos de barras no son suficientes.¿Qué pasa si nuestras pistas de datos cambian con el tiempo y un gráfico lineal es más apropiado? O quizá no estemos satisfechos con tan solo un gráfico de barras. Ahí es donde entra Flot, un complemento de jQuery que nos permite crear gráficos atractivos con facilidad.

En un mundo centrado en la información, a menudo tenemos que mostrar grandes cantidades de datos en la web. Generalmente mostramos una tabla de valores con encabezados, y si realmente quisiéramos hacer algo sofisticado, usaríamos una imagen de un gráfico. A la gente le gustan las imágenes. A mí me gustan las imágenes. ¿Por qué? Debido a que es mucho más sencillo interpretar los datos cuando están en formato visual. Sin embargo, crear la imagen de un gráfico y actualizarla con nuevos datos puede ser complicado. En este tutorial, vamos a usar un complemento de jQuery llamado Flot para crear gráficos sobre la marcha.

Paso 1

Para comenzar necesitamos algunos datos. Para este tutorial, vamos a usar algunos datos del PIB de unos cuantos países diferentes que encontré en Wikipedia. Desafortunadamente los datos solo llegan al año 2003, pero ya que esta no es una lección de economía, eso bastará. Pongamos los datos en una tabla simple y agreguemos algunas líneas para describirlos.

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5	<title>Flot Tutorial</title>
6
7	</head>
8
9	<body>
10
11	<div id="plotarea">
12	<table>
13	<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
14	<tr>
15	<td></td>
16	<th scope="col">2003</th>
17	<th scope="col">2002</th>
18	<th scope="col">2001</th>
19	<th scope="col">2000</th>
20	<th scope="col">1999</th>
21	<th scope="col">1998</th>
22	</tr>
23	<tr>
24	<th scope="row">USA</th>
25	<td>10,882</td>
26	<td>10,383</td>
27	<td>10,020</td>
28	<td>9,762</td>
29	<td>9,213</td>
30	<td>8,720</td>
31	</tr>
32	<tr>
33	<th scope="row">EU</th>
34	<td>10,970</td>
35	<td>9,040</td>
36	<td>8,303</td>
37	<td>8,234</td>
38	<td>8,901</td>
39	<td>8,889</td>
40	</tr>
41	<tr>
42	<th scope="row">UK</th>
43	<td>1,765</td>
44	<td>1,564</td>
45	<td>1,430</td>
46	<td>1,438</td>
47	<td>1,460</td>
48	<td>1,423</td>
49	</tr>
50	<tr>
51	<th scope="row">China</th>
52	<td>1,575</td>
53	<td>1,434</td>
54	<td>1,345</td>
55	<td>1,252</td>
56	<td>1,158</td>
57	<td>1,148</td>
58	</tr>
59	<tr>
60	<th scope="row">India</th>
61	<td>599</td>
62	<td>510</td>
63	<td>479</td>
64	<td>457</td>
65	<td>447</td>
66	<td>414</td>
67	</tr>
68	</table>
69	</div>
70
71	<p>GDP, based on exchange rates, over time. Values in billion USDs.</p>
72
73	</body>
74	</html>

Observa que la tabla está contenida en un div con el id "plotarea". El gráfico que crearemos más adelante reemplazará a la tabla contenida dentro de este div. La tabla se ve un poco fea en este momento, así que agreguemos un poco de CSS para que tenga una apariencia más presentable.

<style type="text/css">
	body { font-family: Arial, Helvetica, sans-serif; }
	table { border-collapse: collapse; }
	td, th { border: 1px solid #222; padding: 5px; }
	
	/* Fix the legend */
	.legend td, .legend th { border: 0; padding: 2px; }
</style>

Deberías tener algo parecido a esto.

Ahora que tenemos todos los datos en una tabla, podemos comenzar a agregar el código JavaScript que creará un gráfico para nosotros. Técnicamente no es necesario que contemos con una tabla, pero es bueno tenerla por dos razones:

Accesibilidad. Hay muchos usuarios de la web que son ciegos, y es importante que todo el contenido de tu sitio web sea fácil de interpretar para un lector de pantallas. Los lectores de pantallas no pueden interpretar gráficos creados por Flot.
Degradabilidad. Un pequeño número de usuarios de la web deshabilitan JavaScript. Aunque se trata de una minoría muy pequeña, no es mucho más complicado agregar una tabla para que ellos también puedan ver los datos.

Paso 2

Vincula las bibliotecas necesarias de JavaScript. Existen dos, además de una más para compatibilidad con IE. Necesitamos vincular jQuery primero y luego la biblioteca Flot, ya que esta depende de jQuery. Dado que Flot usa el elemento canvas para dibujar los gráficos, necesitamos incluir la secuencia de comandos ExplorerCanvas que emula el elemento canvas en IE. Los usuarios de Firefox, Opera y Safari no necesitan esto, así que usaremos comentarios condicionales para asegurarnos de que solamente los usuarios de IE lo descarguen.

<script src="jquery.js" language="javascript" type="text/javascript"></script>

<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>

<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->

Crear un gráfico con Flot es bastante sencillo, ya que muchas de las opciones tienen valores predeterminados razonables. Esto significa que puedes crear un gráfico atractivo con una cantidad de trabajo mínima, pero también puedes ajustarlo a tu gusto. Para crear un gráfico básico, necesitamos especificar un elemento contenedor y los datos a graficar. El elemento contenedor también necesita tener un ancho y un alto específicos, así que usaremos jQuery con el fin de configurar el div "plotarea" para que tenga un ancho de 500px y una altura de 250px.

<script language="javascript" type="text/javascript">
$(function() {
	var plotarea = $("#plotarea");
	plotarea.css("height", "250px");
	plotarea.css("width", "500px");
	$.plot( plotarea , data );
});
</script>

El primer parámetro es un objeto jQuery del elemento contenedor. El segundo elemento es un arreglo tridimensional, en el que los primeros arreglos hijos son conjuntos de datos y los arreglos "nietos" son pares ordenados que especifican un valor X e Y para un plano cartesiano. Grafiquemos primero los datos del PIB de EE. UU.

1	<script language="javascript" type="text/javascript">
2	$(function () {
3	var data = [ [[2003, 10882],
4	[2002, 10383],
5	[2001, 10020],
6	[2000, 9762],
7	[1999, 9213],
8	[1998, 8720]] ];
9
10	var plotarea = $("#plotarea");
11	plotarea.css("height", "250px");
12	plotarea.css("width", "500px");
13	$.plot( plotarea , data );
14	});
15	</script>

La tabla de datos que teníamos antes debe haber sido reemplazada con un gráfico atractivo. Como puedes ver, el arreglo que contiene el conjunto de datos está contenido en otro arreglo padre. Para graficar otro conjunto de datos, simplemente lo agregamos como otro elemento al arreglo padre. Agreguemos los datos para los otros países que teníamos en nuestra tabla.

1	var data = [
2	[[2003, 10882],
3	[2002, 10383],
4	[2001, 10020],
5	[2000, 9762],
6	[1999, 9213],
7	[1998, 8720]],
8
9	[[2003, 10970],
10	[2002, 9040],
11	[2001, 8303],
12	[2000, 8234],
13	[1999, 8901],
14	[1998, 8889]],
15
16	[[2003, 1795],
17	[2002, 1564],
18	[2001, 1430],
19	[2000, 1438],
20	[1999, 1460],
21	[1998, 1423]],
22
23	[[2003, 1575],
24	[2002, 1434],
25	[2001, 1345],
26	[2000, 1252],
27	[1999, 1158],
28	[1998, 1148]],
29
30	[[2003, 599],
31	[2002, 510],
32	[2001, 479],
33	[2000, 457],
34	[1999, 447],
35	[1998, 414]]
36	];

Ahora tenemos un gráfico bastante atractivo, ¡pero no sabemos qué linea corresponde a qué país! Lo que necesitamos es una leyenda. Afortunadamente, Flot permite esto y es cuestión de poner nuestros conjuntos de datos en un objeto JSON y agregar un elemento de tipo etiqueta.

1	var data = [
2	{
3	label: "USA",
4	data: [[2003, 10882],
5	[2002, 10383],
6	[2001, 10020],
7	[2000, 9762],
8	[1999, 9213],
9	[1998, 8720]]
10	},
11
12	{
13	label: "EU",
14	data: [[2003, 10970],
15	[2002, 9040],
16	[2001, 8303],
17	[2000, 8234],
18	[1999, 8901],
19	[1998, 8889]]
20	},
21
22	{
23	label: "UK",
24	data: [[2003, 1795],
25	[2002, 1564],
26	[2001, 1430],
27	[2000, 1438],
28	[1999, 1460],
29	[1998, 1423]]
30	},
31
32	{
33	label: "China",
34	data: [[2003, 1575],
35	[2002, 1434],
36	[2001, 1345],
37	[2000, 1252],
38	[1999, 1158],
39	[1998, 1148]]
40	},
41
42	{
43	label: "India",
44	data: [[2003, 599],
45	[2002, 510],
46	[2001, 479],
47	[2000, 457],
48	[1999, 447],
49	[1998, 414]]
50	}
51	];

Paso 3

Anteriormente mencioné que, si bien Flot tiene muchos valores predeterminados razonables, aunque probablemente funcionen bien para la mayoría de las personas, la leyenda oculta parcialmente algunos de los datos. Flot tiene un tercer parámetro para enviar opciones en un objeto JSON.

1	$.plot( plotarea , data, options );

Para lograr que los datos en el otro extremo del gráfico sean un poco más visibles, vamos a ajustar la opacidad del fondo y los márgenes de la leyenda.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	}
};

A algunas personas (como yo) les gusta poder ver exactamente en dónde están los puntos de datos, así que especifiquemos en las opciones que se debe marcar cada punto con un círculo de un radio determinado.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	},
	points: {
		show: true,
		radius: 3
	}
};

Excelente, tenemos puntos de datos, pero ¡¿a dónde se fueron las líneas?! Volvamos a activarlas de manera explícita.

var options = {
	legend: {
		show: true,
		margin: 10,
		backgroundOpacity: 0.5
	},
	points: {
		show: true,
		radius: 3
	},
	lines: {
		show: true
	}
};

Nuestro código final se ve más o menos así:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml">
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5	<title>Flot Tutorial</title>
6
7	<style type="text/css">
8	body { font-family: Arial, Helvetica, sans-serif; }
9	table { border-collapse: collapse; }
10	td, th { border: 1px solid #222; padding: 5px; }
11
12	/* Fix the legend */
13	.legend td, .legend th { border: 0; padding: 2px; }
14	</style>
15
16	<script src="jquery.js" language="javascript" type="text/javascript"></script>
17	<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>
18	<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
19
20	<script language="javascript" type="text/javascript">
21	$(function () {
22	var data = [
23	{
24	label: "USA",
25	data: [[2003, 10882],
26	[2002, 10383],
27	[2001, 10020],
28	[2000, 9762],
29	[1999, 9213],
30	[1998, 8720]]
31	},
32
33	{
34	label: "EU",
35	data: [[2003, 10970],
36	[2002, 9040],
37	[2001, 8303],
38	[2000, 8234],
39	[1999, 8901],
40	[1998, 8889]]
41	},
42
43	{
44	label: "UK",
45	data: [[2003, 1795],
46	[2002, 1564],
47	[2001, 1430],
48	[2000, 1438],
49	[1999, 1460],
50	[1998, 1423]]
51	},
52
53	{
54	label: "China",
55	data: [[2003, 1575],
56	[2002, 1434],
57	[2001, 1345],
58	[2000, 1252],
59	[1999, 1158],
60	[1998, 1148]]
61	},
62
63	{
64	label: "India",
65	data: [[2003, 599],
66	[2002, 510],
67	[2001, 479],
68	[2000, 457],
69	[1999, 447],
70	[1998, 414]]
71	}
72	];
73
74	var options = {
75	legend: {
76	show: true,
77	margin: 10,
78	backgroundOpacity: 0.5
79	},
80	points: {
81	show: true,
82	radius: 3
83	},
84	lines: {
85	show: true
86	}
87	};
88
89	var plotarea = $("#plotarea");
90	plotarea.css("height", "250px");
91	plotarea.css("width", "500px");
92	$.plot( plotarea , data, options );
93	});
94	</script>
95	</head>
96
97	<body>
98
99	<div id="plotarea">
100	<table>
101	<caption>GDP, based on exchange rates, over time. Values in billion USDs.</caption>
102	<tr>
103	<td></td>
104	<th scope="col">2003</th>
105	<th scope="col">2002</th>
106	<th scope="col">2001</th>
107	<th scope="col">2000</th>
108	<th scope="col">1999</th>
109	<th scope="col">1998</th>
110	</tr>
111	<tr>
112	<th scope="row">USA</th>
113	<td>10,882</td>
114	<td>10,383</td>
115	<td>10,020</td>
116	<td>9,762</td>
117	<td>9,213</td>
118	<td>8,720</td>
119	</tr>
120	<tr>
121	<th scope="row">EU</th>
122	<td>10,970</td>
123	<td>9,040</td>
124	<td>8,303</td>
125	<td>8,234</td>
126	<td>8,901</td>
127	<td>8,889</td>
128	</tr>
129	<tr>
130	<th scope="row">UK</th>
131	<td>1,765</td>
132	<td>1,564</td>
133	<td>1,430</td>
134	<td>1,438</td>
135	<td>1,460</td>
136	<td>1,423</td>
137	</tr>
138	<tr>
139	<th scope="row">China</th>
140	<td>1,575</td>
141	<td>1,434</td>
142	<td>1,345</td>
143	<td>1,252</td>
144	<td>1,158</td>
145	<td>1,148</td>
146	</tr>
147	<tr>
148	<th scope="row">India</th>
149	<td>599</td>
150	<td>510</td>
151	<td>479</td>
152	<td>457</td>
153	<td>447</td>
154	<td>414</td>
155	</tr>
156	</table>
157	</div>
158
159	<p>GDP, based on exchange rates, over time. Values in billion USDs.</p>
160
161	</body>
162	</html>

Pensamientos finales

Existen muchas posibilidades con Flot. La API de Flot detalla todas las diferentes opciones que se encuentran disponibles para ajustar tus gráficos, incluyendo la especificación de diferentes tipos de gráficos, colores, ejes, e incluso cómo habilitar funciones interactivas como la selección y el zoom. Otra posibilidad es hacer que todo sea completamente dinámico y generar el código de JavaScript de forma dinámica con información provenientes de una base de datos usando PHP.

Suscríbete al canal RSS NETTUTS para obtener más tutoriales y artículos diarios sobre desarrollo web.