En un mundo digital e hiperconectado son muchas las aplicaciones que generan información, como por ejemplo sobre el comportamiento de los usuarios en la web: compras, comportamientos, visitas, etc. Por otro lado, existen diversas fuentes de datos abiertos, Open Data, que suele publicar las administraciones públicas o empresas, accesibles en su gran mayoría mediante servicios APIs. En definitiva, la información que almacena estas fuentes de información, puede presentar un gran tamaño y deben mostrarse al usuario de forma resumida y concreta.

Para mostrar información al usuario, es fundamental la visualización interactiva de datos a los usuarios de nuestras aplicaciones web. Sencillez, rapidez, y experiencia de usuario son algunas de las cualidades que se deben cumplir a la hora de mostrar grandes volúmenes de información a los usuarios.

Se debe prestar especialmente atención al hecho de que las visitas de los usuarios, apenas duran unos segundos, en el mejor de los casos, escasos minutos. Si se necesita que comprendan rápidamente la información, se debe emplear técnicas de visualización para mejorar la experiencia UX/UI. Estos recursos externos, logran un alto componente visual, y permiten transmitir el mensaje de una forma muy intuitiva.

¿Imaginas hacer una gráfica desde cero con HTML, CSS y JavaScript?

En este sentido, gracias a recursos externos, se disponen de bibliotecas o APIs que ofrecen múltiples alternativas que ayudan a mostrar los datos de una forma interactiva. El uso de librerías, ayuda considerablemente a integrar diferentes formas de visualización de datos simplemente añadiendo unas pocas líneas de código a nuestro proyecto. Una de las ventajas de estas librerías es que uso está encomendado al lenguaje JavaScript, lo que lo hace totalmente compatible con multitud de Frameworks y tecnologías.

En este post, se muestran 5 librerías, que según nuestra experiencia son las mejores para la visualización de datos.

Tabulator

Tabulator es una librería JavaScript, un poco peculiar, que permite la realización de tablas interactivas. Esta Librería permite la adición de opciones y funcionalidades que llevarían horas implementar con código puro. Con unas pocas líneas de código se logran aspectos clave, tales como paginación, ordenación de los datos según varios campos, carga de datos mediante Ajax, impresión y descarga de informes, … además de dotar de lógica a los datos. Usa un DOM virtual (Document Object Model o Modelo de Objetos del Documento), que permite que se rendericen algunas filas, destruyendo y mostrando las filas a medida que se realiza el desplazamiento por la tabla, por lo que el funcionamiento para grandes volúmenes de datos resulta muy eficiente.

Un ejemplo de caso de uso típico es la necesidad de pintar una celda de un color u otro en función de un valor u otro. Normalmente, esto que se haría con JS o JQuery, Tabulator lo realiza mediante una simple función Callback, al que le introducimos como argumento un array de configuración.

Otro caso típico, es la generación de informes en formato pdf u otros, y la posterior impresión con una serie de campos. De nuevo, esta librería sorprende por la facilidad de uso, con la incrustación de este código, se resuelve esta funcionalidad.

var table = new Tabulator("#example-table", {

    printConfig:{

        columnHeaders:false, //do not include         column headers in printed table

columnGroups:false, //do not include column groups in column headers for printed table

rowGroups:false, //do not include row groups in printed table

columnCalcs:false, //do not include column calcs in printed table

dataTree:false, //do not include data tree in printed table

formatCells:false, //show raw cell values without formatter

},

});

¿Te imaginas que el usuario pueda editar los datos con un clic?

Tabulator lo hace, permite la interacción entre Frontend y Backend, mediante una serie de llamadas Callbacks y la utilización de tecnología Ajax. Por tanto, disponemos de un CRUD que opera en el Frontend.

La simplicidad de uso de Tabulator junto a su documentación, facilita enormemente la labor de desarrollo de aplicaciones dinámicas e interactivas.

Chart.js

Chart.js, es otra librería de JavaScript que permite la realización de diferentes gráficas a partir de datos. De forma sencilla se generan una serie de gráficos con un aspecto visual inmejorable y con diseño responsive. Lo que reduce de forma drástica los tiempos de desarrollo para la creación de elementos de visualización de datos en nuestros proyectos web.

Uno de los aspectos más significativos de esta biblioteca es la posibilidad de añadir eventos, que permitan la interacción con el usuario. Por ejemplo, al pasar el ratón por un segmento de la línea de la gráfica, que nos muestre un cartel informativo con el valor, …

Esta librería además permite la realización de gráficos avanzados con diferentes ejes, escalas, etiquetas, … Además, permite la modificación de los aspectos visuales con hojas de estilo CSS, lo que añade aún más potencialidades a esta librería.

Ejemplo de gráfico de barras en Chart JS:

<canvas id="myChart" width="400" height="400"></canvas>

<script>

    var ctx = document.getElementById('myChart').getContext('2d');

    var myChart = new Chart(ctx, {

        type: 'bar',

        data: {

        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

        datasets: [{

            label: '# of Votes',

            data: [12, 19, 3, 5, 2, 3],

            backgroundColor: [

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

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

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

            'rgba(75, 192, 192, 0.2)',

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

            'rgba(255, 159, 64, 0.2)'],

            borderColor: [

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

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

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

            'rgba(75, 192, 192, 1)',

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

            'rgba(255, 159, 64, 1)'    ],

            borderWidth: 1    }]
            },
            options: {

                scales: {

                yAxes: [{

                    ticks: {

                beginAtZero: true}

            }]}}});

</script>



<script src="[https://cdn.jsdelivr.net/npm/chart.js@2.8.0](https://cdn.jsdelivr.net/npm/chart.js@2.8.0)"></script>

Con la incrustación de este simple código en nuestra aplicación, se obtiene el siguiente gráfico:

Si tus necesidades son la creación de gráficas a partir de un conjunto de datos, Chart.js es la mejor elección para dotar a tus proyectos de interactividad.

D3.js

Otra herramienta imprescindible en visualización de datos es la librería D3.js. Esta librería se caracteriza por la capacidad de crear gráficos de vectores en formato SVG. Este tipo de gráficos no se ven alterados por la resolución de las pantallas, en definitiva, las imágenes nunca se pixelan, lo que arroja una ventaja muy significativa.

D3.js permite hacer una gran variedad de gráficos avanzados como redes, árboles, mapas o burbujas, además de los gráficos usuales (barras, dispersión, …). Esta librería no recomienda ninguna representación gráfica en particular, sino que se trata de un marco de referencia, una especie de Framework, para generar elementos gráficos basados en los datos. Tal es su potencialidad, que se han establecido otra serie de librerías que utilizan como base a esta.

Como contrapartida presenta una curva de aprendizaje bastante elevada, con respecto a otras alternativas.

Ejemplo de gráfico de barras en D3.js:

Un ejemplo de uso de esta librería para la implementación de un Gráfico de barras, sería:

chart = {

const svg = d3.create("svg")

    .attr("viewBox", [0, 0, width, height])

    .call(zoom);

    svg.append("g").attr("class", "bars").attr("fill", "steelblue").selectAll("rect").data(data).join("rect").attr("x", d => x(d.name)).attr("y", d =>y(d.value)).attr("height", d => y(0) - y(d.value)).attr("width", x.bandwidth());


    svg.append("g").attr("class", "x-axis").call(xAxis);

    svg.append("g").attr("class", "y-axis").call(yAxis);



    return svg.node();

}

Obteniendo en nuestra vista, en formato SVG. la siguiente representación gráfica:

Si no deseas limitaciones a la hora de crear gráficos, la librería 3DS.js es el mejor recurso, puedes crear infografías muy avanzadas, donde el límite casi es tu propia imaginación.

Google Charts

Google Chart es una API que nos permite, mediante una petición http, generar una imagen dinámica de tipo PNG. Es utilizado en muchos campos como Google Analytics, y tiene la capacidad y singularidad de usarse con diferentes formatos: CSV, JSON, JavaScript, Excel, … Además, dispone de diferentes plugins que se pueden integrar con diferentes lenguajes de programación.

Esta API nos permite la creación de gráficas, que podremos usar en nuestras aplicaciones web. Su uso es muy sencillo, simplemente se debe realizar una petición http: https://developers.google.com/chart/ Como respuesta, se nos muestra el gráfico resultante de las diferentes opciones de configuración.

Sin embargo, presenta limitaciones en cuanto a su uso, como casi todos los servicios de Google, su uso es gratuito, pero con ciertas limitaciones. En el caso de Google Chart API su uso está limitado a 50.000 peticiones por url, un valor bastante considerable. Aunque existe un pequeño truco, se puede almacenar los gráficos en un servidor y hacer la llamada del recurso desde ahí.

Ejemplo de Gráfico de barras en Google chart:

<html>

    <head>

    <!--Load the AJAX API-->

        <script  type="text/javascript"  src="https://www.gstatic.com/charts/loader.js"></script>

        <script  type="text/javascript">


        // Load the Visualization API and the corechart package.

        google.charts.load('current', {'packages':['corechart']});


        // Set a callback to run when the Google Visualization API is loaded.

        google.charts.setOnLoadCallback(drawChart);




        function  drawChart() {

        // Create the data table.

        var  data = new  google.visualization.DataTable();

        data.addColumn('string', 'Topping');

        data.addColumn('number', 'Slices');

        data.addRows([

            ['Mushrooms', 3],

            ['Onions', 1],

            ['Olives', 1],

            ['Zucchini', 1],

            ['Pepperoni', 2]

        ]);

          // Set chart options

        var  options = {'title':'How Much Pizza I Ate Last Night',

        'width':400,

        'height':300};



        // Instantiate and draw our chart, passing in some options.

        var  chart = new  google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        }

        </script>

    </head>

    <body>

        <!--Div that will hold the pie chart-->

        <div  id="chart_div"></div>

    </body>

</html>

Obteniendo en nuestra vista, en formato SVG. la siguiente representación gráfica:

Este recurso es muy recomendable debido a la extensa documentación que nos proporciona Google, con algunos ejemplos que funciona con un solo “copia y pega”.

Highcharts

Highcharts es una moderna biblioteca de gráficos multiplataforma basada en SVG. Facilita la adición de gráficos interactivos a proyectos web y móviles.

Se trata de una biblioteca de JavaScript robusta que facilita a los desarrolladores la creación de gráficos interactivos para asignar, analizar, coordinar y mostrar tareas, eventos y recursos a lo largo de una línea de tiempo.

Una de las peculiaridades de esta biblioteca es que está preparada para el análisis y visualización de datos procedentes de Big Data. Tiene capacidad para renderizar miles o millones de puntos de datos en el navegador, utilizando la especificación WebGL. Esta especificación permite la renderización de gráficos en 3D, y es una de las últimas tendencias en el desarrollo web para la renderización avanzada de gráficos. Esta librería ofrece uno de los mejores rendimientos en relación a otras tecnologías de renderización Big Data.

Unos de los inconvenientes de Highcharts son sus limitaciones de uso, con una licencia de uso comercial, aunque dispone de una versión gratuita para fines educativos o no comerciales.

Ejemplo de Gráfico de barras en Hightcharts:

Un ejemplo de uso de esta librería para la implementación de un Gráfico de barras, sería:

Highcharts.chart('container', {

    data: {

        table: 'datatable'
    },

    chart: {

        type: 'column'
    },

    title: {

        text: 'Data extracted from a HTML table in the page'
    },

    yAxis: {

        allowDecimals: false,

        title: {

            text: 'Units'
        }

    },

    tooltip: {

        formatter: function () {

            return '<b>' + this.series.name +'</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
        }

    }

});

Obteniendo en nuestra vista, la siguiente representación gráfica:

Recursos externos, elementos claves para enriquecer tu web App

En este post, te mostramos distintos recursos para dotar de interactividad a tu aplicación web, sin embargo, os recomendamos que no cargues demasiado tu web con recursos externos, porque directamente esto se traducirá en un mayor consumo de recursos, y previsiblemente la velocidad de carga de la web sea baja.

Nuestro objetivo con este post era mostrar la potencialidad que poseen los recursos externos, para ayudarnos en nuestra labor de desarrolladores, añadiendo herramientas y funciones que nos costaría decenas de horas de implementar.

Como has podido apreciar, la totalidad de estas bibliotecas utilizan JavaScript, por lo que te recomendamos encarecidamente que consultes algunos de los cursos que tenemos disponibles sobre JavaScript. Como has visto, te ayudarán a ser un programador más eficiente y dotado de más y mejores herramientas para afrontar los proyectos en los que te involucres.