ChartJS

Name: ChartJS
Brand: Jose Aguilar
SKU: joseaguilarblog-6785
Availability: InStock
Rating: 5 (6 reviews)

Chart JS es un plugin JavaScript simple, flexible y muy completo para los diseñadores gráficos y desarrolladores que desean incrustar gráficas en las páginas Web.

Es una de las formas más elegantes que conozco hasta la fecha de incorporar este tipo de elementos gráficos.

No requiere jQuery. Para instalar en tu página Web tan solo es necesario incluir el plugin en la cabecera de tu página. Por ejemplo:

Source code

<script src="js/Chart.bundle.js"></script>

En el <body> utilizar un objeto <canvas> con un identificador. Por ejemplo:

Source code

<canvas id="line_chart"></canvas>

Y finalmente después de la etiqueta de cierre del </body> añadimos la llamada al plugin para el elemento canvas, como por ejemplo:

Source code

<script>
var div_line_chart = document.getElementById("line_chart");
var myLineChart = new Chart(div_line_chart, {
    type: 'line',
    data: {
        labels: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul"],
        datasets: [
            {
                label: "Ingreso",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "#428bca",
                borderColor: "#357ebd",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "#3276B1",
                pointBackgroundColor: "#3276B1",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "#3276B1",
                pointHoverBorderColor: "#3276B1",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
    }
});
</script>

Obteniendo como resultado:

El plugin dispone de muchos parámetros y opciones para poder ser configurado. Eso lo puedes revisar en la documentación de ChartJS.

En el ejemplo en funcionamiento podemos 2 tipos de gráficas que hemos implementado. La gráfica lineal y la de barras. Las gráficas más utilizadas para representar datos estadísticos.

Ver ejemplo en funcionamiento

Ver la documentación del plugin