Comenzando Con Chart.js: Introducción

La gente normalmente no quiere recorrer una cantidad grande de información presentada a ellos en forma de texto o tablas. Eso es mayormente porque es aburrido, pero más importante, es un poco difícil de procesar números crudos.

Por ejemplo, aquí está una tabla de los diez países más poblados en el mundo:

Con solo diez países en esta tabla, aún hay una muy buena oportunidad de que tu y otros lectores salten la tabla enteramente. Normalmente, la gente solo mira uno o dos países que les interesan. Si los mismos datos hubieran sido presentados en la forma de un gráfico de barras, hubiera tomado muy poco tiempo para que alguien tuviera una idea estimada de la población en estos países.

Además, será mucho más sencillo descifrar tendencias o hechos---por ejemplo, los Estados Unidos tiene el doble de población que Bangladesh, y China tiene alrededor de diez veces más gente que Rusia---solo viendo la longitud de las barras en la gráfica.

Una librería popular que puedes usar para crear diferentes tipos de gráficos es Chart.js. En esta serie, estarás aprendiendo todo sobre los aspectos importantes de esta librería. Puede ser usada para crear gráficos elegantes y responsivos sobre Canvas HTML5.

La librería te permite mezclar diferentes tipos de gráficos y trazar datos en escalas fecha tiempo, logarítimica, o personalizada con facilidad. La librería también soporta animaciones que pueden ser aplicadas cuando se cambian los datos o se actualizan colores.

Comencemos con la instalación, y después continuemos a las opciones de configuración y otros aspectos.

Instalación y Uso

Puedes descargar la última versión de Chart.js desde GitHub o usar el enlace CDN para incluirla en tus proyectos. También puedes instalar la librería usando npm o bower con la ayuda de los siguientes comandos:

1

npm install chart.js --save

2

bower install chart.js --save

La librería tiene dos versiones diferentes. La versión normal, llamada Chart.js y Chart.min.js, viene con la librería Chart.js y un analizador de color. Si quieres usar esta versión de la librería y decides usar el eje de tiempo en tus gráficos, tendrás que incluir por separado la librería Moment.js antes de usar Chart.js.

La versión empaquetada, que es identificada como Chart.bundle.js o Chart.bundle.min.js, ya incluye Moment.js. De esta forma, no necesitarás incluir dos archivos separados. Una cosa que necesitas tener en mente es no usar esta versión si ya incluiste Moment.js en tu proyecto. Esto puede resultar en problemas de versiones.

Una vez que has decidido la versión de la librería que quieres usar, puedes incluirla en tus proyectos y comenzar creando gráficas asombrosas.

1

<script src="path/to/Chart.min.js"></script>

2

3

<script>

4

    var barChart = new Chart({...})

5

</script>

Creando una Gráfica

Representemos la tabla de población presentada en la introducción como una gráfica de barras. El eje y será usado para trazar la población, y el eje x será usado para trazar los países. Comenzamos creando un lienzo con id popChart.

1

<canvas id="popChart" width="600" height="400"></canvas>

El ancho y alto son usados para determinar las dimensiones de la gráfica. Cuando creamos gráficas responsivas, la relación de aspecto de la gráfica es determinada por el ancho y alto del lienzo.

Después, necesitas instanciar la clase Chart. Esto puede hacerse pasando el nodo, la instancia jQuery, o el contexto 2d del lienzo en el cuál quieres dibujar la gráfica.

1

var popCanvas = $("#popChart");

2

var popCanvas = document.getElementById("popChart");

3

var popCanvas = document.getElementById("popChart").getContext("2d");

La única cosa que tienes que hacer ahora es pasar todos los parámetros al constructor:

1

var barChart = new Chart(popCanvas, {

2

  type: 'bar',

3

  data: {

4

    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],

5

    datasets: [{

6

      label: 'Population',

7

      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],

8

      backgroundColor: [

9

        'rgba(255, 99, 132, 0.6)',

10

        'rgba(54, 162, 235, 0.6)',

11

        'rgba(255, 206, 86, 0.6)',

12

        'rgba(75, 192, 192, 0.6)',

13

        'rgba(153, 102, 255, 0.6)',

14

        'rgba(255, 159, 64, 0.6)',

15

        'rgba(255, 99, 132, 0.6)',

16

        'rgba(54, 162, 235, 0.6)',

17

        'rgba(255, 206, 86, 0.6)',

18

        'rgba(75, 192, 192, 0.6)',

19

        'rgba(153, 102, 255, 0.6)'

20

      ]

21

    }]

22

  }

23

});

El objeto pasado en el segundo parámetro contiene toda la información que Chart.js necesita para dibujar tu gráfica. La clave type es usada para especificar el tipo de gráfica que quieres dibujar. Puede tener cualquiera de los siguientes valores: line, bar, radar, polarArea, pie, doughnut, y bubble. Estarás aprendiendo sobre todos estos tipos de gráfica en esta serie.

La llave data contiene la información real que quieres trazar. La llave backgroundColor es usada para especificar el color de distintas barras en la gráfica. Cuando el color de fondo no es especificado, se usa el valor por defecto 'rgba(0,0,0,0.1)'.

Cada una de las gráficas también tiene sus propias llaves específicas que puedes usar para controlar su apariencia. Aquí está la gráfica creada por el código de arriba:

En la demostración de arriba, puedes deslizar sobre las barras para ver la población exacta en diferentes países. Una cosa más que vale la pena notar es que el tamaño de la gráfica no es igual a las dimensiones que especificamos, pero aún tiene la misma relación de aspecto.

Si quieres que las gráficas tengan los mismos tamaños en todos los dispositivos, tendrás que establecer el valor de la llave responsive a false.

Opciones de Configuración

La librería Chart.js te la opción de personalizar todos los aspectos de las gráficas que creas. Por ejemplo, puedes cambiar el color y anchura de los bordes de las barras en la gráfica de arriba. También puedes modificar las descripciones de texto y la leyenda cambiando tu tamaño de fuente y color. En esta sección, aprenderás sobre distintas llaves que son usadas para estilizar estos elementos.

La librería tiene cuatro llaves globales especiales que pueden ser usadas para cambiar todas las fuentes en una gráfica. Estas llaves son defaultFontFamily, defaultFontSize, defaultFontStyle, y defaultFontColor. El tamaño de fuente es especificado en pixeles y no aplica a etiquetas de escala de punto radialLinear. De manera similar, defaultFontStyle no aplica al título de descripción de tiempo o pié de página. 

1

Chart.defaults.global.defaultFontFamily = "Lato";

2

Chart.defaults.global.defaultFontSize = 18;

3

Chart.defaults.global.defaultFontColor = 'blue';

La siguiente gráfica usa los ajustes globales de fuente de arriba. Cambiar la apariencia de este modo puede ayudarte a crear gráficas que empatan a tu sitio web en estilo.

También puedes modificar la leyenda que aparece en una gráfica. Las opciones de configuración que necesitaremos pueden ser pasadas al namespace options.legend. También puedes especificar las opciones de leyenda de manera global para todas las gráfica usando Chart.defaults.global.legend. La posición de la leyenda es controlada usando la llave position, que puede aceptar uno de los siguientes cuatro valores: top, left, bottom, y right. También puedes mostrar u ocultar la leyenda usando la llave display.

Además de la leyenda, también puedes controlar la apariencia de la etiqueta de la leyenda. Sus opciones de configuración se establecen abajo de la configuración de leyenda usando la llave label. El ancho de la caja de color puede ser especificado usando la llave boxWidth. Cuando no se especifica un valor, el valor por defecto usado es 40.

Los valores de familia tipográfica, tamaño de fuente, color de fuente y estilo de fuente son heredados de la configuración global por defecto. Sin embargo, puedes especificar tus propios valores para estos usando fontSize, fontStyle, fontFamily, y fontColor.

1

var barChart = new Chart(popCanvas, {

2

    type: 'bar',

3

    data: data,

4

      options: {

5

        legend: {

6

          display: true,

7

          position: 'bottom',

8

          labels: {

9

            boxWidth: 80,

10

            fontColor: 'rgb(60, 180, 100)'

11

          }

12

        }

13

    }

14

});

Puedes controlar la manera en la que las descripciones de texto son dibujadas localmente para una gráfica usando el namespace options.tooltips. De manera similar, Chart.defaults.global.tooltips puede ser usado para establecer la apariencia de descripciones de texto globalmente. Para especificar si las descripciones de texto deberían ser presentadas al usuario, puedes usar la llave enabled. Establecerla a false deshabilitará las descripciones de texto. El valor por defecto de esta llave es true.

También puedes controlar el comportamiento mostrar/ocultar de las descripciones de texto usando la llave intersect. Cuando se establece a true, que también es el valor por defecto para esta llave, las descripciones de texto son mostradas solo cuando el puntero del ratón realmente interactúa con las barras. Cuando se establece a false, las descripciones de texto son mostradas basadas en el comportamiento especificado por la llave mode.

La llave mode es usada para determinar qué elemento es mostrado en la descripción de texto. Su valor por defecto es nearest. Esto significa que cuando estableces intersect a false, la descripción de texto será mostrada para la barra que está más cerca del puntero del ratón.

Al igual que la leyenda, también puedes controlar el valor de diferentes propiedades basadas en fuentes para descripciones de texto. La única diferencia es que esta vez los valores tendrán que ser establecidos de manera individual para el título, cuerpo y otros elementos de pié de página de la descripción de texto.

Por ejemplo, puedes cambiar las propiedades de fuente del cuerpo de la descripción de texto usando bodyFontFamily, bodyFontSize, bodyFontStyle, y bodyFontColor. El título y pie de página de la descripción de texto también tiene propiedades adicionales llamadas titleMarginBottom and footerMarginTop. Estas pueden ser usadas para agregar algún espacio extra entre estos y el cuerpo de la descripción de texto.

De manera similar, puedes agregar padding extra a los lados izquierdo/derecho y arriba/abajo de la descripción de texto usando las propiedades xPadding y yPadding.

Puedes controlar el tamaño de la flecha de la descripción de texto usando la llave caretSize. El fondo de las descripciones de texto pueden ser cambiado usando la llave backgroundColor.

1

var barChart = new Chart(popCanvas, {

2

    type: 'bar',

3

    data: data,

4

      options: {

5

        tooltips: {

6

          cornerRadius: 0,

7

          caretSize: 0,

8

          xPadding: 16,

9

          yPadding: 10,

10

          backgroundColor: 'rgba(0, 150, 100, 0.9)',

11

          titleFontStyle: 'normal',

12

          titleMarginBottom: 15

13

        }

14

    }

15

});

Las opciones de arriba ocultarán el signo de intercalación mientras caretSize sea establecido a 0. Aquí está una demostración en funcionamiento que muestra las opciones en acción. Intenta deslizar sobre las barras para ver la descripción de texto personalizada.

Ideas Finales

Este tutorial proporcionó una introducción básica de la librería Chart.js y te mostró cómo usarla para crear gráficas de barras. También aprendiste sobre diferentes opciones de configuración que pueden ser usadas para controlar la apariencia de distintas gráficas.

Aunque solo usamos gráficas de barras en el tutorial, las opciones de configuración podrían ser aplicadas a todos los tipos de gráficas. En el siguiente tutorial, aprenderás sobre las gráficas de líneas y gráficas de barras a mayor detalle.

JavaScript se ha vuelto uno de los lenguajes de facto para trabajar en la web. No es sin sus curvas de aprendizaje, y hay muchos frameworks y librerías para mantenerte ocupado, también. Si estás buscando recursos adicionales para estudiar o para usar en tu trabajo, revisa lo que tenemos disponible en el marketplace de Envato.

Si tienes alguna pregunta sobre este tutorial, déjame saber en los comentarios.

Nota que los datos de población fueron extraídos de este censo de información.