Gráficas utilizando CanvasJS

Las gráficas nos ayudan a visualizar un conjunto de datos para que podamos comparar rápidamente sus valores. 

Una tabla de datos en una hoja puede resultar difícil de analizar y tardaremos más tiempo en comprender y comparar los valores. En una gráfica todo se ve mucho más claro solo con un vistazo.

Aquí podemos ver un simple ejemplo para la creación de gráficas utilizando la librería CanvasJS.

Con esta librería podemos crear rápidamente gráficas dinámicas e integrarlas en la web.

Código html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    
    <title>Ejemplos Graficas</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
            <div id="pieChart" style="height: 360px; width: 100%;">
            </div>
            </div>
            <div class="col-md-6">
            <div id="columnChart" style="height: 360px; width: 100%;">
            </div>
            </div>
        </div>
        </div>

    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="pack.js"></script>
</body>
</html>

Código javaScript:

var pieChartValues = [{
    y: 39.16,
    exploded: true,
    indexLabel: "Estados Unidos",
    color: "#1f77b4"
}, {
    y: 21.8,
    indexLabel: "Canada",
    color: "#ff7f0e"
}, {
    y: 21.45,
    indexLabel: "Europa",
    color: " #ffbb78"
}, {
    y: 5.56,
    indexLabel: "Malasia",
    color: "#d62728"
}, {
    y: 5.38,
    indexLabel: "Peru",
    color: "#98df8a"
}, {
    y: 3.73,
    indexLabel: "Bolivia",
    color: "#bcbd22"
}, {
    y: 2.92,
    indexLabel: "Tunez",
    color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

    var chart = new CanvasJS.Chart("pieChart", {
        backgroundColor: "white",
        colorSet: "colorSet2",

        title: {
            text: "Pie Chart",
            fontFamily: "Verdana",
            fontSize: 25,
            fontWeight: "normal",
        },
        animationEnabled: true,
        data: [{
            indexLabelFontSize: 15,
            indexLabelFontFamily: "Monospace",
            indexLabelFontColor: "darkgrey",
            indexLabelLineColor: "darkgrey",
            indexLabelPlacement: "outside",
            type: "pie",
            showInLegend: false,
            toolTipContent: "<strong>#percent%</strong>",
            dataPoints: values
        }]
    });
    chart.render();
}
var columnChartValues = [{
    y: 936.04,
    label: "Paris",
    color: "#1f77b4"
}, {
    y: 391.84,
    label: "Londres",
    color: "#ff7f0e"
}, {
    y: 365.76,
    label: "Roma",
    color: " #ffbb78"
}, {
    y: 197.48,
    label: "Barcelona",
    color: "#d62728"
}, {
    y: 94.2,
    label: "Atenas",
    color: "#98df8a"
}, {
    y: 65.28,
    label: "Berlin",
    color: "#bcbd22"
}, {
    y: 51.2,
    label: "Madrid",
    color: "#f7b6d2"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

    var chart = new CanvasJS.Chart("columnChart", {
        backgroundColor: "white",
        colorSet: "colorSet3",
        title: {
            text: "Datos por Ciudades",
            fontFamily: "Verdana",
            fontSize: 25,
            fontWeight: "normal",
        },
        animationEnabled: true,
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },
        theme: "theme2",
        data: [

            {
                indexLabelFontSize: 15,
                indexLabelFontFamily: "Monospace",
                indexLabelFontColor: "darkgrey",
                indexLabelLineColor: "darkgrey",
                indexLabelPlacement: "outside",
                type: "column",
                showInLegend: false,
                legendMarkerColor: "grey",
                dataPoints: values
            }
        ]
    });

    chart.render();
}

Son dos ejemplos simples para ver el potencial que nos ofrece esta librería.

Puedes encontar más información aquí.



Si encuentras esta noticia interesante la puedes compartir en tus redes sociales, a tus seguidores les puede gustar. Utiliza los botones que tienes más abajo.

Share

Comments are closed.