arnoldou / Taller-Chart.js

Taller de Visualización de Datos con Chart.js

TALLER CHART.JS

NODESCHOOL SAN MIGUEL

Impartido los dias 8 y 15 de diciembre de 2018.

Vista Preliminar del Taller Terminado

QUE ES CHARTJS

Es una libreria Javascript para la visualizacion de datos.

Sitio Oficial: https://www.chartjs.org

Caracteristicas:

• Utiliza el elemento canvas del <canvas> </canvas> de HTML5.

• Es Open Source.

• Tiene 8 tipos de Graficas.

  • Barras.
  • Pastel.
  • Linea.
  • Dona.
  • Radar.
  • Area Polar.
  • Burbujas.
  • Otros.

• Sus Gráficas pueden ser Responsivas.

• Licencia MIT. (Tenemos libertad para usar, copiar, distribuir, modificar, sublicenciar o vender. Unica condición es agregar agregar el archivo de licencia y derechos de autor).

• No es la única libreria para este proposito. Hay otras librerias similares (D3.js, Google Charts, Chartist.js, Highcharts JS, etc).

• Desventaja: No tiene para gráficos 3D.

INSTALACIÓN.

• Usando npm o bower.

  • npm install chartjs --save
  • bower install chart.js --save

• Usando un enlace CDN.

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

------ TALLER ------

Requisitos

• Laptop.
• Editor (VS Code sugerido).
• Internet.

Enlaces Importantes

• <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <---- Enlace CDN de Chart.js
• bootswatch.com <---- Temas Bootstrap.
• Colorhunt.com <--- Paleta de Colores para usar en las Gráficas.
• State of Javascript 2018 <---- Encuestas sobre Temas Javascript para Graficar.

Encuestas a Graficar.

1- Que Framework Front-end esta usando (Gráfico de Barras).

Framework	Cantidad
React	13062
Vue Js	5810
Angular	4817
Preact	1251
Ember	1013
Polymer	635

2- Que Editor Usa para Programar (Gráfico de Pastel).

Editor	Cantidad
Sublime Text	4478
VS Code	14492
Atom	3354
Emacs	610
Vim	4467
Webstorm	4304

3- Que Framework de Back-end usa (Gráfico de Linea).

Framework	Cantidad
NodeJs	12764
Koa	1491
Next.js	1701
Meteor	922

GRACIAS

Colaborador: Arnoldo Umaña.

• @arnoldou
• email: [e-mail]