Crear sparklines con el API de gráficos de Google
Hace poco Google presentó un API para crear gráficos y hablamos de ello en este blog. Esta nueva API hace muy sencillo a los desarrolladores incluir gráficos en sus aplicaciones.
Un tipo de gráfico muy interesante en aplicaciones que requieran mostrar datos visualmente son las sparklines. Estos gráficos fueron definidos por Edward Tufte como pequeños gráficos, intensos en datos y simples en diseño. Su uso en aplicaciones web ha ido en aumento, especialmente en cuadros de mando o aplicaciones que requieran mostrar la evolución de varias variables al mismo tiempo.
Un ejemplo de aplicación que hace muy buen uso de estos gráficos es Google Analytics. En el dashboard de Analytics se puede consultar de un vistazo la evolución de un conjunto de variables gracias al uso de sparklines.
Captura de pantalla de Google Analytics, donde se muestran cuatro sparklines:
Por el momento la API no dispone de un tipo de gráfico específico para crear sparklines pero aún así podemos usar un pequeño truco para crearlas.
El truco consiste en definir un gráfico de tipo línea (cht=lc), añadirle los ejes X e Y (chxt=x,y) y luego utilizar el parámetro de estilo para los ejes para esconderlos. El parámetro de estilo de los ejes (chxs) nos permite definir el color, el tipo de letra y la alineación. Si al último parámetro de chxs le asignamos el valor "_" indicamos a la API que no dibuje las líneas de los ejes. Además para que funcione correctamente debemos darle un valor de "1" al tamaño de texto de los ejes X e Y.
Aquí tenéis un ejemplo de sparkline sencilla (podéis consultar la url mirando el src de la imagen):
Este es un ejemplo de sparkline.
Otro ejemplo más intenso en datos, incluyendo un área de referencia con un color de fondo y marcando valores concretos:
Este es un ejemplo de sparkline más complejo.
Un último ejemplo, sparklines al estilo Google Analytics:
Este es un ejemplo de sparkline al estilo de Google Analytics.
Para terminar, recomendaros una herramienta para jugar un poco con la API y que además incluye sparklines: Google Charting Tool.