1

Graficando Informacion con ChartJs

Para todas aquellas ocasiones en las que necesitamos representar información de forma grafica en nuestra App.
Chart.js es una librería de javascript muy sencilla la cual nos permite usar una amplia gama de graficos.
Bueno sin mas dilación vamos allá.
lo primero es importar la librería, en este caso usare las cdn.

<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js">

luego de esto ya podemos comenzar con nuestro grafico.

para representar nuestro grafico usamos una etiqueta canvas de html, a la cual le dejaremos un id, para posteriormente identificarla desde javascript

<canvas id="grafico"height="80px"></canvas>

teniendo esto listo procedemos con nuestro grafico

      var mi_primer_grafico ={
        type:"doughnut",//seleccionamos el tipo de grafico, en este caso es un grafico estilo pie, en esta parte podemos cambiar el tipo de grafico por el que deseamos        data:{/le pasamos la data
          datasets:[{
            data:[1,2,4,6 ],//esta es la data, podemos pasarle variables directamente desde el backend usando blade de la siguiente forma {{$dato1}},            backgroundColor: [//seleccionamos el color de fondo para cada dato que le enviamos"#04B404","#FFBF00",  "#FF0000",  "#04B4AE",
             ],
          }],
          labels: [//añadimos las etiquetas correspondientes a la data"Dato1",  "Dato2", "Dato3", "Dato4",  
             ]
        },
        options:{//le pasamos como opcion adicional que sea responsivo          responsive: true,
        }
      }

Finalmente para poder mostrar el grafico en nuestra app hacemos el llamado al mismo.

var primer_grafico = document.getElementById('grafico').getContext('2d');//seleccionamos el canvaswindow.pie = new Chart(primer_grafico,mi_primer_grafico);//le pasamos el grafico y la data para representarlo

y Listo, con esto ya comenzar a graficar nuestra data.
les dejo el enlace a la documentación de Chart.js http://www.chartjs.org/
espero les sea de ayuda.
Saludos

Escribe tu comentario
+ 2
Ordenar por:
1
1009Puntos

Muchas gracias por crear el tema Alexis, me a servido de mucho,
pero tengo una duda: como puedo conectar los valores de los imput (imput de un form) para que se muestren en la gráfica, e tratado de muchas formas pero no me funciona …

hasta ahora mi arreglo lo tengo así (me funciona si muestro los resultados con números enteros… pero con las variables no):

<script type=“text/javascript”>
$(document).ready( function(){
var datos = {
type: ‘horizontalBar’,
data: {
datasets :[{
data : [
100,
200,
15,
20,
25,
100,
200,
15,
],
backgroundColor: [
"#000",
"#ccc",
"#000fff",
"#00ff00",
"#aaa",
"#000fff",
"#00ff00",
"#aaa",
],
}],
labels : [
“data1”,
“data2”,
“data3”,
“data4”,
“data5”,
“data6”,
“data7”,
“data8”,
]
},
options : {
responsive : true,
}

    };

    var canvas = document.getElementById('chart').getContext('2d');
    window.pie = new Chart(canvas, datos);

    setInterval( function(){
        datos.data.datasets.splice(0);
        var newData = {
            data : [
                result_1,
                result_2,
                result_3,
                result_4,
                result_5,
                result_6,
                result_7,
                result_8,
            ]
        };

        datos.data.datasets.push(newData);

        window.pie.update();
    })

    var result_1 = Number(document.getElementById('r_GalonesGasolinaDiario').value);
    var result_2 = Number(document.getElementById('r_GastodiarioGasolina').value);
    var result_3 = Number(document.getElementById('r_GastodiarioGLP').value);
    var result_4 = Number(document.getElementById('r_AhorroNetoDiarioGLP').value);
    var result_5 = Number(document.getElementById('r_GastodiarioEnGN').value);
    var result_6 = Number(document.getElementById('r_AhorroNetoDiarioGN').value);
    var result_7 = Number(document.getElementById('r_AhorroAñoGLP').value);
    var result_8 = Number(document.getElementById('r_AhorroAñoGN').value);

});

</script>

1
3Puntos

muy bueno queria hacerte una consulta, no se como hacer cuando tengo que graficar con datos que vienen de una base de datos, puedo tomar el valor del recordset pero no se como en el data utilizar un while o un for i ya que no son fijos la cantidad de datos a graficar, ni tampoco en los labels. Por ejemplo un resultado pueden ser como labels; enero, febrero,marzo y los datos 10, 20, 30 y en otro resultado puedo tener enero, febrero,marzo, abril, mayo, junio, julio, agosto y como datos, 10, 20, 30, 40, 50, 60, 70, 80. Muchas gracias.