Curso de PHP con Laravel 2017

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

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.

<script type="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 canvas
      window.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

Curso de PHP con Laravel 2017

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados