Construye un dashboard dinámico con ChartJS

() translation by (you can also view the original English article)

Hoy vamos a crear un dasboard dinámico con gráficos en tiempo real usando el poder de ChartJS. ChartJS es una poderosa biblioteca de JavaScript libre de dependencias que genera gráficos a través del elemento canvas. Lo mejor de todo es que es fácil para los diseñadores comenzar a usarla. Nos enfocaremos en las partes de la biblioteca que te ayudan a comenzar a crear gráficos hermosos y funcionales rápidamente. Vamos a construir un dashboard adecuado para dispositivos móviles de principio a fin.

¿Buscando una solución rápida?

Si estás buscando una solución rápida, hay una excelente colección de secuencias de comandos para tablas y gráficos en Envato Market. Comenzando con un precio de un par de dólares, estas colecciones son una manera rápida de colocar esta funcionalidad en tu sitio web o aplicación. "Chartli", una de nuestras favoritas, permite crear gráficos interactivos (¡que se ven preciosos!)

Comenzando

Vamos a construir nuestro dashboard sobre HTML5 Boilerplate. Descarga el archivo zip o clona el repositorio a través de Git. Vamos a asignar el nombre "chartjs_dashboard" a nuestro directorio de proyecto y a copiar todos los archivos directamente ahí.

1	# On the command line
2	git clone git@github.com:h5bp/html5-boilerplate.git chartjs_dashboard

A continuación vamos a obtener ChartJS. Ve a la versión no reducida en raw.github.com/nnnick/Chart.js/master/Chart.js y copia el contenido en tu archivo js/plugins.js. Tener la versión no reducida permitirá que los errores sean más legibles si te encuentras con ellos.

Consejo: en producción debes usar la versión reducida de JavaScript, de manera que el dashboard sea más eficiente.

La estructura de tu archivo deberá verse de esta forma:

├── 404.html   
 ├── crossdomain.xml   
 ├── css   
 │   ├── main.css   
 │   └── normalize.css   
 ├── favicon.ico   
 ├── img   
 ├── index.html   
 ├── js   
 │   ├── main.js   
 │   ├── plugins.js   
 │   └── vendor   
 │       ├── jquery-1.10.1.min.js   
 │       └── modernizr-2.6.2.min.js   
 └── robots.txt

Nota: esto no incluye algunos de los archivos integrados en H5BP que no usaremos.

Paleta de color

Antes de comenzar a codificar el sitio, comencemos configurando una paleta de color que usaremos a lo largo del diseño. Al hacer esto podemos establecer una futura "guía de estilo"; ésta es una práctica común para básicamente cualquier diseño.

Si estás construyendo el dashboard teniendo una marca particular en mente, comienza usando los colores de dicha marca. Hoy vamos a definir dos colores principales y dos colores auxiliares. También usaremos sombras o versiones desvanecidas de estos colores.

azul oscuro: #637b85
verde: #2c9c69
amarillo: #dbba34
rojo: #c62f29

También usaremos un tono más claro del azul oscuro, #d0dde3. Por último utilizaremos colores en escala de grises.

Fundamentos de ChartJS

ChartJS usa el elemento canvas. El elemento canvas proporciona una interfaz única para JavaScript que permite dibujar píxeles en un área rectangular determinada. A menudo se compara con SVG, que ofrece una solución basada en nodos de DOM para crear gráficos vectoriales en el navegador. Sin embargo, los píxeles dibujados en el elemento canvas no se mantienen en memoria y por lo tanto no responden a los eventos de JavaScript.

Pero basta ya de la charla sobre tecnología, ¿cómo podemos comenzar rápidamente con ChartJS?

Afortunadamente, la página principal de ChartJS tiene muchos ejemplos para que podamos iniciar rápidamente. El patrón básico es crear el elemento canvas en HTML, seleccionarlo con JavaScript y crear el gráfico mientras le enviamos los datos necesarios para construirlo.

<canvas id="something"></canvas>
 <script>
 var canvas = document.getElementById("something");
 var ctx = canvas.getContext("2d");
 new Chart(ctx).Line(data, options);
 </script>

El ejemplo anterior asumiría que ya has definido 'data' y 'options' como objetos, y produciría un gráfico de línea en consecuencia.

En nuestro ejemplo, usaremos el gráfico de dona, el gráfico de línea y el gráfico de radar. Estos gráficos representarían diferentes métricas orientadas a negocios, pero desde luego puedes tomar esto y adaptarlo a tus necesidades.

Marcado de página

Vamos a comenzar definiendo un poco de HTML básico para el diseño de nuestra página.

<div class="wrapper">
 <header>
   <div class="container clearfix">
         <h1>Overview <span>July 8-12, 2013</span><a class="button">Change Date Range</a></h1>
     </div>
 </header>
 <div class="container clearfix">
     <div class="third widget doughnut">
         <h3>Breakdown of Hours</h3>
         <div class="canvas-container">
             <canvas id="hours"></canvas>
         </div>
     </div>
     <div class="third widget line">
         <div class="chart-legend">
             <h3>Shipments per Day</h3>
         </div>
         <div class="canvas-container">
             <canvas id="shipments"></canvas>
         </div>
     </div>
     <div class="third widget">
         <div class="chart-legend">
             <h3>Customer Service Assessment</h3>
         </div>
         <div class="canvas-container">
             <canvas id="departments"></canvas>
         </div>
     </div>
 </div>
 <div class="push"></div>
 </div>
 <footer>
 </footer>

Aquí podemos ver que tenemos un encabezado básico, una sección media y un pie de página. Estamos usando las clases .wrapper y .push para crear un pie de página fijo (consulta aquí para obtener más información). Vamos a crear nuestro diseño para que se ajuste a los dispositivos móviles primero y luego escalarlo a partir de ese punto. Existen algunos trucos que usaremos en el proceso, pero esta estructura hará mucho del trabajo por nosotros.

Antes de ir demasiado lejos...

Toma en cuenta que canvas no funciona muy bien con consultas de medios. En este tutorial usaremos una solución para permitir que los gráficos sean dibujados de nuevo usando diferentes tamaños en JavaScript.

Dentro de nuestro archivo main.js necesitaremos tener una función para cambiar tamaños que sea desencadenada cuando el tamaño de la ventana cambie. También necesitaremos una función para "redibujar" que sea invocada después de que la función para cambiar de tamaño se ejecute. Finalmente, al redibujar los gráficos no queremos que sean animados, como si ésta fuera la primera vez que han sido dibujados.

(function(){
 // set up the timeout variable
 var t;
 // setup the sizing function,
 // with an argument that tells the chart to animate or not
 function size(animate){
     // If we are resizing, we don't want the charts drawing on every resize event.
     // This clears the timeout so that we only run the sizing function
     // when we are done resizing the window
     clearTimeout(t);
     // This will reset the timeout right after clearing it.
     t = setTimeout(function(){
         $("canvas").each(function(i,el){
             // Set the canvas element's height and width to it's parent's height and width.
             // The parent element is the div.canvas-container
             $(el).attr({
                 "width":$(el).parent().width(),
                 "height":$(el).parent().outerHeight()
             });
         });
         // kickoff the redraw function, which builds all of the charts.
         redraw(animate);
 
         // loop through the widgets and find the tallest one, and set all of them to that height.
         var m = 0;
         // we have to remove any inline height setting first so that we get the automatic height.
         $(".widget").height("");
         $(".widget").each(function(i,el){ m = Math.max(m,$(el).height()); });
         $(".widget").height(m);
 
     }, 100); // the timeout should run after 100 milliseconds
 }
 $(window).on('resize', size);
 function redraw(animation){
     var options = {};
     if (!animation){
         options.animation = false;
     } else {
         options.animation = true;
     }
     // ....
         // the rest of our chart drawing will happen here
     // ....
 }
 size(); // this kicks off the first drawing; note that the first call to size will animate the charts in.

Si esto te parece un poco desalentador, ¡no te preocupes! ¡haz una pregunta en los comentarios y nosotros, así como la comunidad de Tuts+, te ayudaremos a comprenderlo totalmente!

Un poco de CSS para comenzar

Queremos configurar algunas estructuras CSS básicas para iniciar. Desde luego HTML5 Boilerplate incluye normalize y algunos otros valores predeterminados que puedes cambiar, pero para este tutorial escribiremos nuestro CSS después de la línea "Author's custom styles" ("Estilos personalizados del autor").

html, body {
     height: 100%;
 }
 body {
     font-family: 'Source Sans Pro', sans-serif;
     color: #666;
 }
 /* button */
 .button {
     cursor: pointer;
     text-decoration: none;
     font-size: 0.6em;
     font-weight: 400;
     text-transform: uppercase;
     display: inline-block;
     padding: 4px 6px;
     margin: 0 10px;
     position: relative;
     background: #ccc;
     color: #fff;
     box-shadow: 0 0 2px rgba(0,0,0,0.1);
     background: rgb(190,190,190); /* Old browsers */
     background: -moz-linear-gradient(top, rgba(190,190,190,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,190,190,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
     background: linear-gradient(to bottom, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
 }
 .button:hover {
     background: #637b85;
 }
 /* Header styles */
 header {
     text-align: center;
     background: #637b85;
     color: #fff;
     margin-bottom: 40px;
 }
 header span {
     font-weight: 200;
 }
 header .button {
     font-size: 0.2em;
     top: -6px;
 }
 
 /* various containers */
 .container {
     width: 200px;
     margin: 0 auto;
 }
 .canvas-container {
     min-height: 300px;
     max-height: 600px;
     position: relative;
 }
 .widget {
     position: relative;
     margin-bottom: 80px;
     background: #efefef;
     padding: 12px;
     margin-bottom: 30px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }

Aquí definimos el código CSS necesario para el pie de página fijo, así como una clase button, una clase contenedor con centrado automático, una clase que contenga nuestros elementos canvas dentro de nuestros widgets, además de nuestros widgets en sí. También necesitaremos agregar la fuente de Google que estamos definiendo para el cuerpo incluyéndola en nuestra etiqueta head.

1	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>

El gráfico de dona

Los gráficos de dona son muy parecidos a los gráficos circulares, pero les falta una parte en el centro. De forma predeterminada, ChartJS define que 50% del área del gráfico debe quitarse; vamos a quedarnos con este valor predeterminado. El código para crear el gráfico de dona se muestra a continuación.

var data = [
     {
         value: 20,
         color:"#637b85"
     },
     {
         value : 30,
         color : "#2c9c69"
     },
     {
         value : 40,
         color : "#dbba34"
     },
     {
         value : 10,
         color : "#c62f29"
     }
 
 ];
 var canvas = document.getElementById("hours");
 var ctx = canvas.getContext("2d");
 new Chart(ctx).Doughnut(data);

Aquí puedes ver que hemos definido los datos y los colores de nuestro gráfico de dona. Esto es todo lo que se necesita para que el gráfico de dona funcione. Sin embargo, ¿qué representan cada una de las secciones? desafortunadamente ChartJS aún no tiene una manera sencilla de definir etiquetas para el gráfico de dona; sin embargo, podemos crear nuestras propias leyendas para describir cada una de las diferentes secciones. Modifica el html del widget del gráfico de dona para incluir lo siguiente.

<div class="third widget doughnut">
     <h3>Breakdown of Hours</h3>
     <p><a href="" class="button">Filter By Employee</a></p>
     <div class="canvas-container">
         <canvas id="hours"></canvas>
         <span class="status"></span>
     </div>
     <div class="chart-legend">
         <ul>
             <li class="ship">Shipping &amp; Receiving</li>
             <li class="rework">Rework</li>
             <li class="admin">Administrative</li>
             <li class="prod">Production</li>
         </ul>
     </div>
 </div>

Podemos usar estas etiquetas li en sus clases de forma muy sencilla en el CSS aprovechando la pseudoclase ':before'.

.chart-legend ul {
     list-style: none;
     width: 100%;
     margin: 30px auto 0;
 }
 .chart-legend li {
     text-indent: 16px;
     line-height: 24px;
     position: relative;
     font-weight: 200;
     display: block;
     float: left;
     width: 50%;
     font-size: 0.8em;
 }
 .chart-legend  li:before {
     display: block;
     width: 10px;
     height: 16px;
     position: absolute;
     left: 0;
     top: 3px;
     content: "";
 }
 .ship:before { background-color: #637b85; }
 .rework:before { background-color: #2c9c69; }
 .admin:before { background-color: #dbba34; }
 .prod:before { background-color: #c62f29; }

A continuación, queremos tener un bonito "pulgar arriba" en el centro de la dona. Esto involucra el uso de algunos trucos con CSS, incluyendo una versión de Uncle Dave's Ol' Padded Box para lograr que el círculo sea responsivo. Usaremos el span con la clase de .status para lograr este círculo. Agrega las siguientes reglas a main.css:

.widget.doughnut .status {
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     width: 30%;
     height: 0;
     padding-top: 12%;
     padding-bottom: 18%;
     color: #444;
     margin-top: -15%;
     margin-left: -15%;
     font-size: 1.4em;
     font-weight: 700;
     text-align: center;
     border-radius: 50%;
     background-color: #aaa;
     background-image: url(data:image/png;base64,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);
     background-repeat: no-repeat;
     background-size: 30%;
     background-position: center;
 }

Tal vez el elemento más evidentemente destacado aquí es el uso de data URI para la imagen de fondo. Esto nos permite evitar una solicitud HTTP adicional, y sintácticamente es lo mismo que usar un url de http de verdad. También estamos configurando este elemento de manera que se posicione de forma absoluta dentro de su elemento .widget, que previamente configuramos para tener una posición relativa.

Ahora vamos a continuar y configurar la tipografía del widget. Solamente usamos elementos h3 y p dentro del widget; éste es el css que los acompaña.

.widget p {
     margin-top: 0;
     text-align: center;
 }
 .widget h3 {
     margin: -12px 0 12px -12px;
     padding: 12px;
     width: 100%;
     text-align: center;
     color: #627b86;
     line-height: 2em;
     background: #d0dde3;
 }

Las reglas de margen y relleno del elemento h3 permiten que dicho elemento se extienda hasta el borde del elemento widget por encima de la parte superior del relleno de 12px del mismo. También vamos a configurar el margen superior con un valor de 0 en el elemento p para que se ajuste mejor al encabezado del widget.

El gráfico de línea

Una de las características más útiles de ChartJS es que algunos de los gráficos permiten múltiples conjuntos de datos. Estos conjuntos de datos serán dibujados en el mismo gráfico secuencialmente, permitiendo que un conjunto de información pueda compararse con otro. Un ejemplo perfecto de cómo es que esto puede ser útil se encuentra en el gráfico de línea. Usaremos dos conjuntos de datos para explorar esta funcionalidad.

var data = {
     labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
     datasets : [
         {
             fillColor : "rgba(99,123,133,0.4)",
             strokeColor : "rgba(220,220,220,1)",
             pointColor : "rgba(220,220,220,1)",
             pointStrokeColor : "#fff",
             data : [65,54,30,81,56,55,40]
         },
         {
             fillColor : "rgba(219,186,52,0.4)",
             strokeColor : "rgba(220,220,220,1)",
             pointColor : "rgba(220,220,220,1)",
             pointStrokeColor : "#fff",
             data : [20,60,42,58,31,21,50]
         },
     ]
 }
 var canvas = document.getElementById("shipments");
 var ctx = canvas.getContext("2d");
 new Chart(ctx).Line(data, options);

Hay unas cuantas cosas que debemos notar en este código nuevo: primero, estamos reutilizando las variables que usamos para construir el gráfico de dona. Esto es totalmente válido en JavaScript, y en realidad reduce ligeramente la cantidad de memoria usada por la secuencia de comandos en general. Sin embargo esto puede causar confusión en el futuro y, si planeas adaptar este código para usarlo en producción, quizá sea más eficiente usar variables nuevas para cada nuevo gráfico que generes.

A continuación, el gráfico de línea es compatible con etiquetas. Esto es importante, ya que nos permite evitar la creación de leyendas usando HTML. Sin embargo también es importante que los puntos de los datos estén alineados con las etiquetas proporcionadas. En este ejemplo, nuestro primer punto de datos en el primer conjunto, 65, coincide con "Mon" en las etiquetas.

Finalmente, nuestros fillColors para estos conjuntos de datos son versiones RGBa de los colores que definimos anteriormente (azul oscuro y amarillo). Encontramos los valores RGB introduciendo los colores en el selector de colores de Photoshop, pero esto puede logarse usando cualquiera de entre varias herramientas para seleccionar colores.

También agregaremos el marcado para unos cuantos botones y un rango legible para los humanos. El código html para el widget lineal se ve de la siguiente manera.

<div class="third widget line">
     <div class="chart-legend">
         <h3>Shipments per Day</h3>
         <p><span>This Week</span> &mdash; <strong>Last Week</strong></p>
         <p><a href="" class="button">Change Date Range</a><a href="" class="button">Filter by Location</a></p>
     </div>
     <div class="canvas-container">
         <canvas id="shipments"></canvas>
     </div>
 </div>

Podemos mejorar el HTML adicional y ayudar a los usuarios a conectar las fechas con el siguiente CSS:

.widget.line p span {
     color: #dbba34;
 }
 .widget.line p strong {
     color: #637b85;
     font-weight: 400;
 }

Gráfico de radar

Los gráficos de tipo radar son útiles para destilar una selección de variables en un solo gráfico legible, con el fin de obtener una percepción general de la interacción entre las diferentes variables. Por ejemplo, en nuestro ejemplo exploraremos la idea del servicio al cliente en base al número de veces que han sido mencionadas ciertas palabras clave. En un gráfico de radar, los puntos trazados crearán una figura. Esa figura nos puede dar una idea general de la efectividad del servicio al cliente.

¡Veamos cómo podemos crear esto! Una vez más, vamos a reutilizar las variables que creamos anteriormente.

var data = {
     labels : ["Helpful","Friendly","Kind","Rude","Slow","Frustrating"],
     datasets : [
         {
             fillColor : "rgba(220,220,220,0.5)",
             strokeColor : "#637b85",
             pointColor : "#dbba34",
             pointStrokeColor : "#637b85",
             data : [65,59,90,81,30,56]
         }
     ]
 }
 var canvas = document.getElementById("departments");
 var ctx = canvas.getContext("2d");
 new Chart(ctx).Radar(data, options);

Y el HTML que lo acompaña se verá de la siguiente manera:

<div class="third widget">
     <div class="chart-legend">
         <h3>Customer Service Assessment</h3>
         <p>based on words mentioned</p>
         <p><a href="" class="button">Track another word</a></p>
     </div>
     <div class="canvas-container">
         <canvas id="departments"></canvas>
     </div>
 </div>

Intuitivamente podemos comprender que una figura que se encuentra más arriba y a la derecha será mejor que una figura localizada más abajo y a la izquierda. Sin embargo no perdemos los datos específicos disponibles para nosotros dentro del gráfico a un nivel granular de una sola variable. En este caso, la palabra "rude" ("ofensivo") se menciona a menudo, pero la sensación general del servicio al cliente parece positiva en base a otras palabras clave.

Haciéndolo todo responsivo

Ya hemos configurado nuestros elementos canvas para que sean responsivos con el código JavaScript que usamos para responder al cambio de tamaño de la ventana. Ahora necesitamos lograr que nuestro CSS sea responsivo usando consultas de medios. Éste es el css que usaremos para lograrlo.

@media only screen and (min-width:300px){
     .container {
         width: 300px;
         margin: 0 auto;
     }
 }
 
 @media only screen and (min-width:600px){
     .container {
         width: 580px;
         margin: 0 auto;
     }
     .third {
         float: left;
         width: 47.5%;
         margin-left: 5%;
     }
     .third:first-child {
         margin-left: 0;
     }
     .third:last-child {
         display: block;
         width: 100%;
         margin-left: 0;
     }
 }
 
 @media only screen and (min-width:960px){
     .container {
         width: 940px;
     }
     .third {
         float: left;
         width: 30%;
         margin-left: 2.5%;
         margin-right: 2.5%;
     }
     .third:first-child {
         margin-left: 0;
     }
     .third:last-child {
         margin-right: 0;
         margin-left: 2.5%;
         width: 30%;
     }
 }
 @media only screen and (min-width:1140px){
     .container {
         width: 1120px;
     }
 }
 @media only screen and (min-width:1360px){
     .container {
         width: 1300px;
     }
 }

Lo primero que debemos notar acerca de este CSS es que todas las consultas de medios se basan únicamente en el ancho mínimo. Esto significa que estamos diseñando a partir de las pantallas con menor anchura y agregando nuevas reglas a medida que nos movemos hacia valores más grandes. Nuestro diseño no requiere muchos cambios en cada punto de interrupción, pero este es un patrón de mejores prácticas en diseños para todas las escalas.

Podemos ver algunos cambios de diseño básicos en cada punto de interrupción, incluyendo el ancho del elemento contenedor primario así como la forma en la que tratamos a la clase .third, que usamos en cada uno de los widgets. Por debajo de 400 apilamos todos los widgets uno encima del otro. Con valores de entre 400 y 600, hacemos que los primeros dos widgets sean columnas con la mitad del ancho, y al tercer widget (el gráfico de radar) lo dejamos con su ancho completo. Finalmente, con valores por encima de 960 usamos tres columnas en línea.

Conclusión

Este tutorial te ha guiado a través de los pasos básicos para la creación de un dashboard usando ChartJS. Los conceptos fundamentales descritos aquí deberán ayudarte a crear proyectos más complicados usando ChartJS, y también deberán alentarte a pensar acerca del diseño responsivo desde la perspectiva de abajo a arriba.

¿Qué experiencia has tenido con las bibliotecas de generación de gráficos? ¿usas SVG o canvas para crear gráficos de datos? ¿qué cosas te gustarían que ChartJS hiciera que por ahora no hace? ¡Agrega tus comentarios abajo!