Web - Créer facilement des graphiques animés avec Chart.js

1 1 1 1 1 1 1 1 1 1 Rating 2.75 (8 Votes)
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Chart.js est une bibliothèque Javascript permettant de créer des graphiques web. Côté technologie, la librairie se repose sur du HTML5 Canvas pour le rendu des graphes. Les 6 types de graphiques de Chart.js sont Doughnut, Pie, Line, Bar, Radar, Polar Area.

Dans cet article vous allez voir les différentts types de graphiques de Chart.js. Vous pouvez de plus voir la démonstration et télécharger le code source. Chart.js est open source (Licence : MIT). Dans la démonstration, nous allons utiliser Bootstrap et vous montrer que Chart.js est aussi responsive donc s'adapte aux différents dispositifs mobiles.

Chart.js

Doughnut

Le Doughnut graphique est juste un simple diagramme circulaire avec un trou à l'intérieur .

164 web creer facilement des graphiques animes avec chart js 01

Exemple de code pour créer le graphique :

// get doughnut chart canvas
var doughnut= document.getElementById("doughnut").getContext("2d");

// draw pie chart
new Chart(doughnut).Doughnut(doughnutData, doughnutOptions);

Pie

Le Pie graphique est juste un simple diagramme circulaire.

164 web creer facilement des graphiques animes avec chart js 02

Exemple de code pour créer le graphique :

// get pie chart canvas
var pie= document.getElementById("pie").getContext("2d");

// draw pie chart
new Chart(pie).Pie(pieData, pieOptions);

Line

Un graphique en ligne est une façon de tracer des points sur une ligne .

Il est souvent utilisé pour afficher des tendance, et la comparaison des deux ensembles de données .

164 web creer facilement des graphiques animes avec chart js 03

Exemple de code pour créer le graphique :

// get line chart canvas
var line = document.getElementById('line').getContext('2d');

// draw line chart
new Chart(line).Line(lineData, lineOptions);

Bar

Un graphique à barres est une façon de montrer les données en forme de barres .

Il est parfois utilisé pour afficher des tendances, et la comparaison des données multiples définit côte à côte .

 164 web creer facilement des graphiques animes avec chart js 04

Exemple de code pour créer le graphique :

// get bar chart canvas
var bar = document.getElementById('bar').getContext('2d');

// draw bar chart
new Chart(bar).Bar(barData, barOptions); 

Radar

Radar affiche les données multivariées sous la forme d' un tableau à deux dimensions de plus de trois variables représentée sur des axes à partir du même point .

164 web creer facilement des graphiques animes avec chart js 05

Exemple de code pour créer le graphique :

// get radar chart canvas
var radar= document.getElementById("radar").getContext("2d");

// draw radar chart
new Chart(radar).Radar(radarData, radarOptions);

Polar Area

Polar Area affiche les données multivariées sous la forme d' un tableau à deux dimensions de plus de trois variables représentée sur des axes à partir du même point .

164 web creer facilement des graphiques animes avec chart js 06

Exemple de code pour créer le graphique :

// get radar chart canvas
var polar= document.getElementById("polar-area").getContext("2d");

// draw radar chart
new Chart(polar).PolarArea(polarData, polarOptions);

Démonstration et code source

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn