Highcharts vs C3.js, Las librerias graficas que dominaran el mundo

Highcharts vs C3.js, Las librerias graficas que dominaran el mundo

En mi anterior artículo Cómo generar gráficos fácilmente con C3.js hablamos de una de las librerías de javascript con mayor potencial y sencilla de usar del mercado, en este caso os traemos una librería con mucho peso en este mundo pero algo más compleja de utilizar y haremos una pequeña comparación para que a la hora de implementar tus proyectos seas capaz de seleccionar la que mejor se adapte a ti.

Highcharts, Gráficos interactivos para Javascript

Highcharts es una biblioteca de software para gráficos escrita en JavaScript puro, lanzada en 2009. Tiene licencia propietaria, pero es gratuita para usos personales / no comerciales y se paga para aplicaciones comerciales. Actualmente es una de las bibliotecas más potentes del mercado, con una gran cantidad de gráficas diferentes y con grandes opciones de personalización, lo que la hace muy atractiva.

Instalación y primeros pasos

Podemos comenzar a utilizar esta librería de diversas maneras por ejemplo a través de Bower/Component (npm) con el nombre highcharts o enlazando desde su pagina o incluso descargando sus ficheros desde su página web.

En nuestro caso lo vamos a hacer añadiendo la declaración siguiente en el head de nuestro html:

< script src = " https://code.highcharts.com/highcharts.js " > </ script >

Como hemos comentado previamente desde Bower y npm se instala con:

npm install --save highcharts/highcharts-dist#nightly

Creando nuestro primer gráfico interactivo

Una vez que está instalado/añadido a nuestro proyecto esta librería ya podemos comenzar su uso, debemos conocer que tiene acciones o mapas que requieren otras dependencias pero esto ya es un nivel más avanzado. Lo primero es crear en nuestro html el contenedor div con las medidas que requerimos que tenga el gráfico:

<div id="container" style="width:100%; height:400px;"></div>

Y llamamos al gráfico desde una etiqueta script, esto es posible hacerlo desde un js enlazado en nuestra página principal, en la cabecera de nuestro html o incluso debajo de la creación de nuestro div, aunque este último está totalmente desaconsejado semánticamente.

document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });

Además de esta forma de crear nuestro gráfico debemos conocer que existe otro método independiente denominado Highcharts.stockChart, este se utiliza para los gráficos de tipo bolsa o bursátil y su llamada es la siguiente:

let chart; // globally available
    document.addEventListener('DOMContentLoaded', function() {
        chart = Highcharts.stockChart('container', {
            rangeSelector: {
                selected: 1
            },
            series: [{
                name: 'USD to EUR',
                data: usdtoeur // predefined JavaScript array
           }]
       });
    });

Una vez que tenemos estas sentencias en nuestra web veremos el siguiente gráfico:

Analizando el código insertado podemos ver diferentes secciones que son fácilmente reconocibles:

• Chart – type: En esta es donde se indica el tipo de gráfico que deseamos añadir.
• xAxis e yAxis: Indicamos la categorización de elementos, y las diferentes posibilidades de personalización que tenemos disponibles en los diferentes ejes.
• Series: Indicamos los datos categorizados que deseamos que muestre nuestro gráfico.

Para indicar el tipo de gráfico no solo se muestra en la sección chart sino que podemos indicarlo en la propia serie, e incluso podemos indicar diferentes tipos de gráficos lo que nos hará mucho mas potentes nuestras propias representaciones. En este caso vamos a indicar que la primera serie sea de tipo bar y la segunda con un tipo línea

document.addEventListener('DOMContentLoaded', function () {
    Highcharts.chart('container', {
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
        		type: 'bar',
            name: 'Jane',
            data: [1, 0, 4]
        }, {
        		type: 'line',
            name: 'John',
            data: [5, 7, 3]
        }],
    });
});

Podremos observar que ahora nuestro gráfico se ha transformado en el siguiente:

Con esto podemos hacer una mezcla de gráficos de diferentes naturalezas como un gráfico de columnas con un pie chart, e incluso añadir una línea de referencia con los totales.

Este ejemplo se encuentra realizado en jsfiddle. Como se observa en este ejemplo es bastante completo y potente lo que nos puede ofrecer una mayor versatilidad a la hora de representar nuestros datos.

Highcharts vs C3.js, Comparativa.

Ambas librerías son muy potentes y nos ayudan para representar nuestros datos de manera eficaz, pero dependiendo del equipo de desarrollo y de la naturaleza del proyecto puede ser mejor utilizar una u otra.

La comparación realizada a continuación esta basada en la experiencia de uso personal, por lo que puede diferir con vuestras opiniones:

Tras un tiempo trabajando con ellos algunas recomendaciones, si tenemos un equipo con gran experiencia en javascript y el proyecto es de un cliente potente y con ganas de tener un cuadro de mandos diferencial yo me dejaría llevar por la magia de Highcharts, siempre previo consensuar las diferentes licencias de las que dispone.

En el caso de que tengamos un equipo con poca experiencia en javascript o el proyecto sea simple donde se quiere obtener una serie de gráficos clásicos donde se muestre un cuadro de mandos tradicional recomendaría dejarnos llevar por C3.js y su facilidad de uso.