Gráficos dinámicos con chart.js ?
Introducción
En este video vamos a aprender a crear graficas en nuestra pagina web con esta potente herramienta llamada chart.js y la url de la pagina es https://www.chartjs.org. Antes de comenzar a tirar codigo (escribir código) les voy a presentar una comparativa de las diferentes alternativas a chartjs y porque esta herramienta es la que mas nos conviene.
Comparativa
1.- highcharts en lo particular a mi me gusta mucho, yo he trabajado con esta herramienta y tiene infinidad de alternativas pero tiene el inconveniente de que es de paga y varia desde 800USD a 2500USD. Se puede descargar y usar de forma profesional pero en la parte inferior derecha de tus gráficas aparecerá una leyenda que dirá que esta gráfica esta hecha por highcharts y eso no es muy profesional.
2.- Canvasjs De igual forma he trabajado un poco con esta herramienta y es muy intuitiva, flexible y no hace falta documentación. Además los ejemplos son muy entendibles puedes hacer pruebas directamente pero ocurre lo mismo que highcharts y es que es de pago los precios varían de 400 USD a 2,000USD.
3.- Anychart aunque no la he usado he oído hablar de ella y pues tiene muy buenas referencias.
Así que para terminar con esta comparativa pues finalmente termina ganado chartjs por ser opensource y ademas por si fuera poco tiene plugins que dan funciones extras a esta herramienta los cuales podemos encontrar aqui https://www.chartjs.org/docs/latest/developers/plugins.html. A pesar de ser opensource no tiene ninguna desventaja en comparación los las otras 3 herramientas mencionadas. Y por ultimo como nota adicional chartjs no requiere de ninguna libreria extra (Ni angula, ni jquery ni react) en otras palabras trabaja sobre javascript nativo lo que significa es que podemos integrar chartjs a cualquier framework javascript sin ningún problema.
Codigo:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
<script>
var ctx= document.getElementById("myChart").getContext("2d");
var myChart= new Chart(ctx,{
type:"pie",
data:{
labels:['col1','col2','col3'],
datasets:[{
label:'Num datos',
data:[10,9,15],
backgroundColor:[
'rgb(66, 134, 244,0.5)',
'rgb(74, 135, 72,0.5)',
'rgb(229, 89, 50,0.5)'
]
}]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
</script>
</html>
Ejemplo en codepen
https://codepen.io/eucm2/pen/oRNgBX
