Categor铆as: Sin categor铆a

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.
Resultado de imagen para canvasjs logo

3.- Anychart aunque no la he usado he o铆do hablar de ella y pues tiene muy buenas referencias.
Resultado de imagen para anychart logo

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

Videotutorial

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 meses hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 meses hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 meses hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace