En mi publicación pasada, Highcharts: Has que tus datos cobren vida, hablaba de una gran herramienta, llamada Highcharts, que nos permite crear gráficas interactivas de una forma sencilla. La misma es construida completamente en Javascript lo que significa que no necesita de ningún código de servidor para funcionar. En esta publicación voy a estar mostrando cómo utilizar esta herramienta y cómo puede ser de gran beneficio para nuestros usuarios.
¿Qué es un dashboard?
Primero quiero dejar claro qué es un dashboard y para qué se utiliza. Un dashboard, cómo se le conoce en ingles, son una serie de gráficas que muestran información, sobre tendencias, proyecciones o data a tiempo real, de una manera organizada y fácil de entender. Normalmente son utilizados con usuarios que necesitan ver gran cantidad de información en poco tiempo o cuando queremos darle un usuario un panorama completo sobre algún asunto.
Muy bien, ya que tenemos claro que es un dashboard y sabemos la herramienta que vamos a utilizar para la creación del mismo, empecemos. La imagen abajo es lo que vamos a estar creando utilizando Highcharts.
Creando el dashboard
Antes de crear el dashboard debemos tener claro que tipo de información queremos proveer a nuestros usuarios. Una vez tengamos esto claro el proceso será mucho más fácil. Para este ejemplo vamos a crear un dashboard de los motores de búsqueda más populares. El mismo va a incluir 3 gráficas:
- Una gráfica lineal que muestre el tráfico mensual de cada motor de búsqueda
- Una gráfica circular que muestre el porcentaje de usuarios que cada motor de búsqueda posee.
- Una gráfica que muestre en tiempo real la cantidad de usuarios que están utilizando Google.com.
Ya que tenemos las gráficas que vamos a mostrar en nuestro dashboard, es hora de construir el código HTML para el mismo.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Tráfico mensual</title> <!-- referencia a jQuery y a Highcharts --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <!-- div que contendrá la gráfica lineal --> <div id="linea" style="width: 50%; height: 350px; margin: 0 auto;float:left;"></div> <!-- div que contendrá la gráfica circular --> <div id="pie" style="width: 50%; height: 350px; margin: 0 auto;float:left;"></div> <div style="border-top:1px solid #CDCDCD;margin:10px;padding:0;clear:both;"></div> <!-- div que contendrá la gráfica a tiempo real --> <div id="tiempoReal" style="height: 400px; margin: 0 auto;"></div> </body> </html>
Como pueden ver, el código HTML es bastante sencillo. Lo que nos queda ahora es crear el código de Javascript para la creación de nuestras gráficas. Primero vamos a crear la gráfica lineal que va a mostrar el tráfico mensual de los principales motores de búsqueda.
$('#linea').highcharts({
chart: {
type: 'line', // tipo de gráfica
borderWidth: 0 // ancho del borde de la gráfica
},
title: {
text: 'Tráfico mensual de lo principales motores de búsqueda', // título
x: -20
},
subtitle: {
text: 'Año 2013', // subtítulo
x: -20
},
xAxis: {
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'] // categorías
},
yAxis: {
title: {
text: 'Tráfico (millones)' // nombre del eje de Y
},
plotLines: [{
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' Millones' // el sufijo de la información presente en el "tooltip"
},
legend: { // configuración de la leyenda
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 1
},
series: [{ // configuración de las series
name: 'Google.com',
data: [50, 55, 49, 66, 78, 87, 94, 99, 95, 90, 100, 96]
}, {
name: 'Yahoo.com',
data: [35, 40, 41, 39, 52, 48, 55, 57, 60, 48, 53, 47]
}, {
name: 'Bing.com',
data: [23, 25, 32, 31, 39, 44, 38, 42, 51, 43, 52, 55]
}]
});
El código de arriba es el que se encarga de crear la gráfica lineal del trafico mensual de los principales motores de búsqueda. Simplemente configuramos cada aspecto de la gráfica para obtener el resultado deseado. La imagen de abajo es el resultado de la configuración que acabamos de crear.
El código para crear la segunda gráfica es más simple que el de la primera.
$('#pie').highcharts({
chart: {
type: 'pie', // tipo de gráfica circular
borderWidth: 0
},
title: {
text: 'Cantidad de usuarios por motor de búsqueda', // título
},
subtitle: {
text: 'Año 2013',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
name: 'Usuarios',
data: [ // configuración de cada pedazo de la gráfica
{
name: 'Google.com',
y: 71.0,
sliced: true,
selected: true
},
['Yahoo.com', 14.0],
['Bing.com', 15.0]
]
}]
});
El resultado del código que acabamos de crear para la segunda gráfica es el siguiente.
Y por último la gráfica que muestra información a tiempo real de los usuarios conectados a google.com. Para mantener el ejemplo simple la data que muestra la gráfica no es real. La gráfica muestra un número aleatorio cada 2 segundos simulando la cantidad de usuarios. Sin embargo, data real puede ser mostrada utilizando AJAX y algún código de servidor (PHP, ASP.Net, etc). Este es código para la última gráfica.
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#tiempoReal').highcharts({
chart: {
type: 'spline', // tipo de gráfica
animation: Highcharts.svg,
marginRight: 10,
events: { // eventos de la gráfica
load: function() { // función que corre cada 2 segundos una vez la gráfica sea cargada
var google = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.floor((Math.random() * 1000000) + 1);
google.addPoint([x, y], true, true); // añade el punto en la gráfica
}, 2000);
}
}
},
title: {
text: 'Usuarios activos en Google.com' // título
},
subtitle:{
text: 'Tiempo Real'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Usuarios Activos'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() { // formato del "tooltip"
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{ // configuración de la serie
name: 'Google.com',
data: (function() { // función que genera los primero puntos en la gráfica
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 1000000) + 1)
});
}
return data;
})()
}]
});
});
En el código de arriba creamos una gráfica que cada 2 segundo genera un número aleatorio y lo inserta en la gráfica. Como mencioné anteriormente, esto puede ser reemplazado por una función que utilice AJAX para buscar en una base de datos los nuevos valores. El resultado de este código es el siguiente.
Obviamente, en la imagen no se aprecia lo que es una gráfica a tiempo real. Por eso les exhorto que usted mismo haga la prueba.
Todo junto
Este es todo el código junto. Solo copia y pega en un archivo html para verlo en un navegador.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tráfico mensual</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#linea').highcharts({
chart: {
type: 'line', // tipo de gráfica
borderWidth: 0 // ancho del borde de la gráfica
},
title: {
text: 'Tráfico mensual de lo principales motores de búsqueda', // título
x: -20
},
subtitle: {
text: 'Año 2013', // subtítulo
x: -20
},
xAxis: {
categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'] // categorías
},
yAxis: {
title: {
text: 'Tráfico (millones)' // nombre del eje de Y
},
plotLines: [{
color: '#808080'
}]
},
tooltip: {
valueSuffix: ' Millones' // el sufijo de la información presente en el "tooltip"
},
legend: { // configuración de la leyenda
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 1
},
series: [{ // configuración de las series
name: 'Google.com',
data: [50, 55, 49, 66, 78, 87, 94, 99, 95, 90, 100, 96]
}, {
name: 'Yahoo.com',
data: [35, 40, 41, 39, 52, 48, 55, 57, 60, 48, 53, 47]
}, {
name: 'Bing.com',
data: [23, 25, 32, 31, 39, 44, 38, 42, 51, 43, 52, 55]
}]
});
$('#pie').highcharts({
chart: {
type: 'pie',
borderWidth: 0
},
title: {
text: 'Cantidad de usuarios por motor de búsqueda',
},
subtitle: {
text: 'Año 2013',
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
name: 'Usuarios',
data: [
{
name: 'Google.com',
y: 71.0,
sliced: true,
selected: true
},
['Yahoo.com', 14.0],
['Bing.com', 15.0]
]
}]
});
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#tiempoReal').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var google = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.floor((Math.random() * 1000000) + 1);
google.addPoint([x, y], true, true);
}, 2000);
}
}
},
title: {
text: 'Usuarios activos en Google.com'
},
subtitle:{
text: 'Tiempo Real'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Usuarios Activos'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Google.com',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.floor((Math.random() * 1000000) + 1)
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<!-- div que contendrá la gráfica lienal -->
<div id="linea" style="width: 50%; height: 350px; margin: 0 auto;float:left;"></div>
<!-- div que contendrá la gráfica circular -->
<div id="pie" style="width: 50%; height: 350px; margin: 0 auto;float:left;"></div>
<div style="border-top:1px solid #CDCDCD;margin:10px;padding:0;clear:both;"></div>
<!-- div que contendrá la gráfica a tiempo real -->
<div id="tiempoReal" style="height: 400px; margin: 0 auto;"></div>
</body>
</html>
Pruebalo
No es lo mismo que te cuenten a verlo por ti mismo. Por eso les dejo este enlace donde muestra el resultado del ejemplo que acabamos de ver.
Resultado del dashboard en pantalla completa.
Conclusión
Los dashboards llegaron para quedarse y de la misma manera Highcharts. Es increible lo que podemos crear con un poco de imaginación y herramientas como estas. Así que, tomen ideas, jueguen con la herramienta y creen dashboards dinámicos y llenos de información.
Descargar Highcharts.
Puedes encontrar la documentación de Highcharts aquí.
