Share
Hay muchos tutoriales sobre cómo hacer gráficos de barras CSS. Pero a veces, los gráficos de barras no son suficientes. ¿Qué pasa si nuestras pistas de datos cambian con el tiempo y un gráfico de líneas es más apropiado? O tal vez no estamos satisfechos con sólo un gráfico de barras. Ingrese Flot, el complemento ajQuery que nos permite hacer gráficas atractivas con facilidad.
En un mundo centrado en los datos, a menudo tenemos que mostrar grandes cantidades de datos en la web. En general, mostramos una tabla de valores con encabezados y, si realmente quisiéramos obtener un diseño elegante, usaríamos una imagen de un gráfico. A la gente le gustan las imágenes. Me gustan las fotos. ¿Por qué? Porque es mucho más fácil interpretar los datos cuando está en forma visual. Sin embargo, crear una imagen gráfica y actualizarla con nuevos datos puede ser una molestia. En este tutorial, vamos a utilizar un complemento de jQuery llamado Flot para crear gráficos sobre la marcha.
Para empezar, necesitamos algunos datos. Para este tutorial, vamos a utilizar algunos datos del PIB para algunos países diferentes que encontré en Wikipedia. Desafortunadamente, los datos solo llegan a 2003, pero como esta no es una lección de economía, será suficiente. Pongamos los datos en una tabla simple y agregue algunas líneas para describirlos.
Flot Tutorial
PIB, basado en tipos de cambio, a lo largo del tiempo. Valores en miles de millones de dólares. 2003 2002 2001 2000 1999 1998 Estados Unidos 10,882 10,383 10,020 9,762 9,213 8,720 UE 10,970 9,040 8,303 8.234 8,901 8,889 Reino Unido 1,765 1,564 1,430 1,438 1,460 1,423 China 1,575 1,434 1,345 1.252 1.158 1.148 India 599 510 479 457 447 414 PIB, basado en tipos de cambio, a lo largo del tiempo. Valores en miles de millones de dólares.
Observe que la tabla está contenida en un div con un id de "plotarea". El gráfico que crearemos más adelante reemplazará la tabla contenida dentro de este div. La mesa se ve un poco fea en este momento, así que vamos a agregar algo de CSS para que sea más presentable.
Deberías tener algo como este.
Ahora que tenemos todos los datos en una tabla, podemos comenzar a agregar el JavaScript que creará un gráfico para nosotros. Técnicamente, no tenemos que tener una mesa, pero es bueno tenerla por dos razones:
Enlace las bibliotecas de JavaScript requeridas. Hay dos de ellos, más uno más para el soporte de IE. Primero debemos vincular jQuery y luego la biblioteca de Flot, ya que depende de jQuery. Como Flot usa el elemento de lienzo para dibujar los gráficos, debemos incluir el script ExplorerCanvas que emula el elemento de lienzo en IE. Los usuarios de Firefox, Opera y Safari no necesitan esto, por lo que usaremos comentarios condicionales para asegurarnos de que solo los usuarios de IE lo descarguen.
Crear una gráfica con Flot es bastante simple porque muchas de las opciones tienen valores predeterminados razonables. Esto significa que puede crear un gráfico atractivo con un trabajo mínimo, pero también puede ajustarlo a su gusto. Para hacer un gráfico básico, necesitamos especificar un elemento contenedor y los datos a graficar. El elemento contenedor también debe tener un ancho y una altura especificados, por lo que usaremos jQuery para configurar el div "plotarea" para que tenga un ancho de 500 px y una altura de 250 px.
El primer parámetro es un objeto jQuery del elemento contenedor. El segundo elemento es una matriz tridimensional donde las primeras matrices secundarias son conjuntos de datos y las matrices de "nietos" son pares ordenados que especifican un valor de X e Y para un plano cartesiano. Grafiquemos los datos del PIB para los Estados Unidos primero.
La tabla de datos que teníamos antes debe reemplazarse con un gráfico de aspecto agradable. Como puede ver, la matriz que contiene el conjunto de datos está contenida en otra matriz principal. Para graficar otro conjunto de datos, simplemente lo agregamos como otro elemento a la matriz principal. Agreguemos los datos de los otros países que teníamos en nuestra tabla..
var data = [[[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]], [[2003, 10970], [ 2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], [[2003, 1795], [2002, 1564], [2001, 1430], [ 2000, 1438], [1999, 1460], [1998, 1423]], [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [ 1998, 1148]], [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Ahora tenemos una gráfica bastante buena, ¡pero no sabemos qué línea es de qué país! Lo que necesitamos es una leyenda. Afortunadamente, Flot admite esto y es una cuestión de poner nuestros conjuntos de datos en un objeto JSON y agregar un elemento de etiqueta.
var data = [label: "USA", data: [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]] , etiqueta: "EU", datos: [[2003, 10970], [2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], etiqueta: "Reino Unido", datos: [[2003, 1795], [2002, 1564], [2001, 1430], [2000, 1438], [1999, 1460], [1998, 1423]], etiqueta : "China", datos: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148]], etiqueta: " India ", datos: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Mencioné anteriormente que aunque Flot tiene muchos valores predeterminados sensibles. Si bien es probable que estén bien para la mayoría de las personas, la leyenda oculta parcialmente algunos de los datos. Flot tiene un tercer parámetro para pasar opciones en un objeto JSON.
$ .plot (plotarea, datos, opciones);
Para hacer que los datos en el extremo más alejado del gráfico sean un poco más visibles, ajustaremos la opacidad de 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 dónde están los puntos de datos, así que especifiquemos en las opciones para marcar cada punto con un círculo de un radio específico.
var options = legend: show: true, margen: 10, backgroundOpacity: 0.5, puntos: show: true, radio: 3;
Genial, tenemos puntos de datos, pero ¿a dónde van las líneas? Vamos a encenderlos de nuevo explícitamente.
var options = legend: show: true, margen: 10, backgroundOpacity: 0.5, points: show: true, radio: 3, lines: show: true;
Nuestro código final se ve algo como esto:
Flot Tutorial
PIB, basado en tipos de cambio, a lo largo del tiempo. Valores en miles de millones de dólares. 2003 2002 2001 2000 1999 1998 Estados Unidos 10,882 10,383 10,020 9,762 9,213 8,720 UE 10,970 9,040 8,303 8.234 8,901 8,889 Reino Unido 1,765 1,564 1,430 1,438 1,460 1,423 China 1,575 1,434 1,345 1.252 1.158 1.148 India 599 510 479 457 447 414 PIB, basado en tipos de cambio, a lo largo del tiempo. Valores en miles de millones de dólares.
Hay muchas posibilidades con Flot. La API de Flot detalla todas las diferentes opciones disponibles para ajustar sus gráficos, incluida la especificación de diferentes tipos de gráficos, colores, ejes e incluso 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 JavaScript de forma dinámica con datos de una base de datos utilizando PHP..
Accentsconagua