---
title: Data Visualisation avec ChartJS
tags: data, chart, data
robots: noindex, nofollow
author: Julien Noyer
---
# Data Visualisation avec ChartJS
*Trouver le bon affichage pour la bonnes information*
> © [Julien Noyer](https://www.linkedin.com/in/julien-n-21219b28/) - All rights reserved for educational purposes only
---
## Introduction
[**Chart.js**](https://www.chartjs.org) est une bibliothèque JavaScript open-source sous la licence MIT, créée par le développeur Web londonien Nick Downie en 2013, elle est maintenant maintenue par la communauté, [**Chart.js**](https://www.chartjs.org) est la deuxième bibliothèque de graphiques Javascript la plus populaire sur GitHub par le nombre d'étoiles après [**D3.js**](https://d3js.org), considérée comme beaucoup plus facile à utiliser, mais moins personnalisable que [**D3.js**](https://d3js.org).
## Initialiser une page web avec [**Chart.js**](https://www.chartjs.org)
[**Chart.js**](https://www.chartjs.org) est une bibliothèque [Front End](https://fr.wikipedia.org/wiki/Développement_web_frontal), dans le cadre de ce document nous allons l'utiliser sur une page HTML que nous configurons de cette manière :
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ChartJS : Data Visualisation</title>
<!-- [CDN] ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<!-- Création d'une section pour afficher le graphique -->
<section id="dataVisualisation"></section>
<script>
// Ajouter le script sous cette ligne
</script>
</body>
</html>
```
> Nous importons plusieurs [CDN](https://fr.wikipedia.org/wiki/Réseau_de_diffusion_de_contenu) afin d'utiliser [**Chart.js**](https://www.chartjs.org) dans une page web.
## Organiser les données pour créer une Data Visualisation
Avant de pouvoir utiliser [**Chart.js**](https://www.chartjs.org) il est essentiel de savoir comment organiser les données pour les intégrer dans un graphique. Dans la mesure ou [**Chart.js**](https://www.chartjs.org) est une bibliothèque Javascript, le format de données à utiliser pour réaliser des graphiques et le [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Nous allons partir d'un jeu de données simple qui représente un tableau de deux colonnes dont les données en CSV sont les suivantes :
```csv=
city, available_bikes, available_bike_stands
marseille, 654, 897
amiens, 398, 590
lyon, 387, 736
```
Il est possible d'utiliser [D3.js](https://d3js.org) pour convertir ces données CSV en JSON, ce qui nous donne le résultat suivant :
```json=
[
{ "city": "marseille", "available_bikes": 654, "available_bike_stands": 897 },
{ "city": "marseille", "available_bikes": 398, "available_bike_stands": 590 },
{ "city": "marseille", "available_bikes": 387, "available_bike_stands": 736 }
]
```
Les données ainsi converties peuvent être utilisées dans [**Chart.js**](https://www.chartjs.org) pour réaliser un graphique. Il est important de respecter scrupuleusement les noms des propriétés afin que [**Chart.js**](https://www.chartjs.org) comprenne bien les données que nous souhaitons traiter :
```javascript=
datasets: [
{
label: 'Stands disponibles',
data: available_bike_stands,
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Vélos disponibles',
data: available_bikes,
backgroundColor: 'rgba(255, 206, 86, 0.6)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Nombre de stations',
data: stationLength,
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
```
> La propriété "datasets" est celle qui permet de définir la valeur des données à traiter.
[**Chart.js**](https://www.chartjs.org) propose un grand nombre de graphiques différents pour visualiser les données dont vous pouvez trouver [des exemples ici](https://www.chartjs.org/docs/latest/samples/bar/vertical.html). Pour définir le type de graphique à utiliser, il faut définir un type particulier. Dans notre exemple, nous allons créer un graphique à barres dont voici la structure complète :
```javascript=
{
type: 'bar',
data: {
labels: [ "lyon", "toulouse", ... ],
datasets: [
{
label: 'Stands disponibles',
data: [ 5417, 4212, ... ],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Vélos disponibles',
data: [ 4155, 4186, ... ],
backgroundColor: 'rgba(255, 206, 86, 0.6)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Nombre de stations',
data: [ 426, 350, ... ],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
```
> la propriété option est relative au type de graphique
## Afficher le graphique dans une page Web
À présent que nos données sont organisées correctement pour [**Chart.js**](https://www.chartjs.org), nous pouvons afficher notre graphique dans une page Web de la manière suivante :
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Traitement de données et Datavisualisation</title>
<!-- [CDN] ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>
<body>
<!-- Création d'un canvas pour afficher le graphique -->
<canvas id="myBarChart" width="400" height="400"></canvas>
<script>
// Créer une fonction pour afficher un graphique
const addChart = context => {
new Chart(
document.querySelector(context).getContext('2d'),
{
type: 'bar',
data: {
labels: [ "lyon", "toulouse", ... ],
datasets: [
{
label: 'Stands disponibles',
data: [ 5417, 4212, ... ],
backgroundColor: 'rgba(54, 162, 235, 0.6)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},
{
label: 'Vélos disponibles',
data: [ 4155, 4186, ... ],
backgroundColor: 'rgba(255, 206, 86, 0.6)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
},
{
label: 'Nombre de stations',
data: [ 426, 350, ... ],
backgroundColor: 'rgba(255, 99, 132, 0.6)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
);
}
/*
Lancer l'interface
*/
document.addEventListener('DOMContentLoaded', () => {
// Déclencher la fonction "addChart" en précisant la balise HTML
addChart('#myBarChart');
})
//
</script>
</body>
</html>
```
> La propriété **width** et **height** permettent de définir la taille en pixel du graphique.
---
## Ressources
> Index des liens vers les sujets traités dans ce syllabus :
- **Chart.js** https://www.chartjs.org
- **Dévelopement Front End** https://fr.wikipedia.org/wiki/Développement_web_frontal
- **Data Visualisation** https://fr.wikipedia.org/wiki/Visualisation_de_données
Sign in with Wallet
Connect another wallet