Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Termina en:

03D

00H

55M

51S

InicioCurso de PHP con Laravel 2017
Curso de PHP con Laravel 2017
1

Graficando Informacion con ChartJs

Alexis Antonio
alexisMoragaa
7993

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

3
hace 5 años
Escribe tu comentario
+ 2
Ordenar por:
Top
1
dulce-guzman
dulce-guzman
1009Puntos
4 años

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
TheCrow
TheCrow
3Puntos
4 años

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.

Entradas relacionadas

4

Crea una API RESTful con Laravel y llévala a producción usando docker!

Laravel API Boilerplate Dockerized Puedes gestionar una API RestFull de la forma más rápida, sencilla y con dependencias de código open sou
jfernancordova
jfernancordova
0

Declaraciones de use en grupo (NAMESPACES)

Anteriormente en varias clases del curso de php y laravel he visto el uso de la palabra use para importar clases de la siguiente manera: &l
Darwinrv94
Darwinrv94
1

Selects Anidados con AJAX yJQuery

Hay Ocaciones en que tenemos inputs de tipo select con listas interminables de elementos y muchas veces no es necesario desplegar la lista c
alexisMoragaa
alexisMoragaa
3

Conectar a n (varias) Bases de Datos con Laravel

Hace días me encontré con tremendo problema, quería conectarme a apróximadamente 500 bases de datos (ese número irá creciendo) por lo que me
Darwinrv94
Darwinrv94