---
# System prepended metadata

title: Data Visualisation avec ChartJS
tags: [' chart', data, ' data']

---

---
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*

![](https://i.imgur.com/GuBLCfJ.png)

> &copy; [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

![](https://i.imgur.com/eAySYs0.png)

> 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
