Creación de gráficas con Javascript y CanvasJS

CanvasJS es una librería para Javascript con la cual podemos generar de manera rápida y muy sencilla fantásticas gráficas de diferentes formas y tamaños con las cuales podemos darle un aspecto visual realmente extraordinario a nuestro proyecto.

En este ejemplo tenemos creada una simple tabla html la cual contiene unos identificadores en los elementos span contenidos en las celdas.

Para poder graficar estos elementos lo primero que debemos hacer es descargar la librería de CanvasJS la cual podemos obtener en su sitio web a través de este link

Para este ejemplo hemos extraído TODO el contenido del archivo comprimido que descargamos de la web de Canvas en un directorio llamado js en el directorio principal del proyecto.

Luego que hagas esto puedes crear tu archivo index.html con el siguiente código.

<!DOCTYPE html>
<html lang="es">
<head>
        <meta charset="UTF-8">
        <title>Ejemplo Grafica Canvasjs</title>
        <link rel="stylesheet" href="css/estilos.css">
        <script src="js/canvasjs.min.js"></script>
        <script>
                function grafica() {
                        var chart = new CanvasJS.Chart("chartContainer", {
                                animationEnabled: true, 
                                animationDuration: 2000,   //change to 1000, 500
                            theme: "theme1",
                                    
                            title:{
                                text: "",
                                fontSize: 22           
                            },
                                
 
                            exportFileName: "grafica_canvas",  //Give any name accordingly
                                exportEnabled: true,
 
                            data: [  //array of dataSeries     
                            { //dataSeries - first quarter
                         /*** Change type "column" to "bar", "area", "line" or "pie"***/        
                            type: "column",
                            name: "Columna1",
                            showInLegend: true,
                            dataPoints: [
                                    { label: "Periodo1", y: +document.getElementById("col1par1").innerHTML },
                                    { label: "Periodo2", y: +document.getElementById("col2par1").innerHTML },
                                    { label: "Periodo3", y: +document.getElementById("col3par1").innerHTML },                                    
                                    { label: "Periodo4", y: +document.getElementById("col4par1").innerHTML },
                                    { label: "Periodo5", y: +document.getElementById("col5par1").innerHTML }
                            ]
                            },
 
                            { //dataSeries - second quarter
 
                            type: "column",
                            name: "Columna2", 
                            showInLegend: true,               
                            dataPoints: [
                                    { label: "Periodo1", y: +document.getElementById("col1par2").innerHTML },
                                    { label: "Periodo2", y: +document.getElementById("col2par2").innerHTML },
                                    { label: "Periodo3", y: +document.getElementById("col3par2").innerHTML },                                    
                                    { label: "Periodo4", y: +document.getElementById("col4par2").innerHTML },
                                    { label: "Periodo5", y: +document.getElementById("col5par2").innerHTML }
                            ]
                            }
 
                            ],
                         /** Set axisY properties here*/
                            axisY:{
                                prefix: "N°",
                                //suffix: "K"
                                labelFontSize: 14,
                                labelFontColor: "#337ab7",
                                labelFontWeight: "bold"
                            },
 
                            axisX:{
                                        labelFontSize: 14,
                                        labelFontColor: "black"
                                }   
                        });
 
                        chart.render();
                }
        </script>
</head>
<body>
        <h1>Ejemplo CanvasJS</h1>
        <form action="#">
                <table>
                        <tr>
                                <td><span>Columna 1</span></td>
                                <td><span id="col1par1">100</span></td>
                                <td><span id="col1par2">80</span></td>
                        </tr>
                        <tr>
                                <td><span>Columna 2</span></td>
                                <td><span id="col2par1">50</span></td>
                                <td><span id="col2par2">42</span></td>
                        </tr>
                        <tr>
                                <td><span>Columna 3</span></td>
                                <td><span id="col3par1">78</span></td>
                                <td><span id="col3par2">70</span></td>
                        </tr>
                        <tr>
                                <td><span>Columna 4</span></td>
                                <td><span id="col4par1">200</span></td>
                                <td><span id="col4par2">185</span></td>
                        </tr>
                        <tr>
                                <td><span>Columna 5</span></td>
                                <td><span id="col5par1">162</span></td>
                                <td><span id="col5par2">161</span></td>
                        </tr>
                        <tr>
                                <td colspan="3"><center><button onclick="grafica()">Generar Gráfica</button></center></td>
                        </tr>
                </table>
        </form>
        <br /><br />
        <div id="chartContainer"></div>
</body>
</html>

Y le damos un poco de estilo recuerda que debes copiar este código en un archivo llamado estilos.css dentro de una carpeta llamada css en el directorio principal de tu pagina.

table {
        margin: auto;
        border: #000000 2px solid;
        border-collapse: collapse;
 
}
 
table td {
        border: #000000 2px solid;
        border-collapse: collapse;
}
 
table tr td span {
        padding: 5px 10px;
        text-align: center;
}
 
h1 {
        text-align: center;
        font-size: 24px;
        color: #000000
}

Tags: