LAS MEJORES LIBRERÍAS JAVASCRIPT PARA CREAR GRÁFICOS

JavaScript se ha convertido en uno de los lenguajes de programación más populares para el desarrollo de aplicaciones web. Una de las áreas donde ha tenido un gran impacto es en la visualización de datos y la creación de gráficos. Existen diversas librerías JavaScript para gráficas que son populares y ofrecen una gran variedad de características. En este artículo, presentaremos las mejores librerías JavaScript para gráficas y comentaremos sus puntos fuertes.

D3.js

D3.js es una de las librerías más populares para la creación de gráficos en JavaScript. Ofrece una gran variedad de gráficos personalizables, incluyendo gráficos de barras, líneas, áreas, tortas y diagramas de dispersión. D3.js también es compatible con una gran cantidad de formatos de datos, lo que permite a los desarrolladores importar datos de diferentes fuentes y mostrarlos en gráficos personalizados.

Puntos fuertes:

• Gran flexibilidad y capacidad de personalización.
• Admite una amplia variedad de tipos de gráficos y visualizaciones de datos.
• Compatible con otras tecnologías web.

https://d3js.org

Ejemplo:

var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body")
  .selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text(function(d) { return d; });

Chart.js

Chart.js es una librería JavaScript que se enfoca en la simplicidad y la facilidad de uso. Ofrece gráficos como barras, líneas, tortas, radar y polar. Chart.js también ofrece una gran cantidad de opciones de personalización para los gráficos, como colores, leyendas y animaciones.

Puntos fuertes:

• Fácil de usar y configurar.
• Admite una variedad de gráficos y visualizaciones populares.
• Ligera y rápida.

https://www.chartjs.org

Ejemplo:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Rojo', 'Azul', 'Amarillo', 'Verde', 'Violeta', 'Naranja'],
        datasets: [{
            label: '# de votos',
            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
                }
            }]
        }
    }
});

Highcharts

Highcharts es una librería JavaScript para la creación de gráficos interactivos y personalizables. Ofrece gráficos de líneas, barras, áreas, tortas y otras opciones de visualización de datos. Highcharts también ofrece características avanzadas como mapas interactivos y gráficos.

Puntos fuertes:

• Ofrece una gran cantidad de gráficos y visualizaciones de datos interactivas y personalizables.
• Admite características avanzadas, como mapas interactivos y gráficos en tiempo real.
• Excelente soporte y documentación.

https://www.highcharts.com

Ejemplo:

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Población mundial por región'
    },
    subtitle: {
        text: 'Fuente: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['África', 'América', 'Asia', 'Europa', 'Oceanía'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Población (millones)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millones'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Año 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Año 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Año 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Año 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});

Google Charts

Google Charts es una librería de gráficos gratuita y fácil de usar para JavaScript. Ofrece una gran cantidad de gráficos interactivos, incluyendo barras, líneas, tortas, áreas y mapas. Además, Google Charts ofrece una gran cantidad de opciones de personalización para los gráficos, como el color, el tamaño y el estilo.

Puntos fuertes:

• Fácil de usar y configurar.
• Admite una gran cantidad de gráficos interactivos y visualizaciones de datos.
• Ofrece una gran cantidad de opciones de personalización.

https://developers.google.com/chart

Ejemplo:

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Tarea', 'Horas al día'],
    ['Trabajar', 11],
    ['Comer',     2],
    ['Desplazar', 2],
    ['Ver TV',    2],
    ['Dormir',    7]
  ]);

  var options = {
    title: 'Mi actividad diaria',
    pieHole: 0.4,
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}

Estas son algunas de las mejores librerías JavaScript para la creación de gráficos. Cada una de ellas tiene sus propios puntos fuertes y características que las hacen únicas. Al utilizar estas librerías, los desarrolladores pueden crear gráficos personalizados y visualmente atractivos para su aplicación web.