Las graficas de pie y dona(doughnut) son utiles cuando queremos comprar valores, por ejemplo en encuestas, ventas por almacen, por empleado o cualquier uso que se le quiera dar.

La libreria Chart.js cuenta con la posibilidad de crear este tipo de graficas de pie y dona (doughnut).

Ya hace tiempo les habia explicado como crear graficas de barras y lineas usando chart.js.

Grafica de Pie

Este es el codigo para crear una grafica de Pie, solo falta incluir la libreria chart.js

En el ejemplo se puede ver que en esta grafica de pie consta de 5 valores y todos deben coincidir.

  • data: 1,2,3,4,5
  • backgroundColor: red, orange, yellow, green, blue
  • labels: Red, Oranje, Yellow, Green, Blue

Es decir el orden en que se encuentran los elementos equivalen a como se mostraran, por ejemplo: valor 1, color red, etiqueta Red.

La diferencia entre la grafica de pie y doughnut es solo el parametro type=’pie’ que para una grafica de dona se cambia por type=’doughnut’.

Multiples Datasets

Una caracteristica especial de las graficas con Chart.js es que se pueden agregar multiples datasets y hacer graficas muy visuales.

Y aqui el codigo:

Descargar

Descarga los archivos de ejemplo completos grafica de pie, grafica de pie con multiple dataset, grafica de doughnut y grafica de doughnut con multiple data set.

Conclusion

Como pueden ver crear graficas usando Chart.js es muy facil y practico, ustedes pueden hacer sus propias pruebas, incluirlo en sus sistemas y demas.

Les invito a que se suscriban al blog para que reciban un email cada vez que publique nuevos articulos.

Tambien les invito a que apoyen mi trabajo enviando una donacion voluntaria ya que esto me ayuda a crear contenido nuevo dia con dia.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.