Visualisation de données dans une page web avec chart.js

La bibliothèque chart.js fournit des outils pour la création en JavaScript de graphiques pour la visualisation de données. Vous pouvez visualiser ici quelques exemples.

1. Prérequis JavaScript : les listes et les dictionnaires

var l1 = ["lundi","mardi","mercredi"]; var l2 = [24,85,852];

var d1 = {"janvier":4,"mars":7,"mai":13}; var d2 = {"nom":"dupont","prénom":"nicolas","age":45};

2. Utilisation de chart.js

Ce qu'il faut ajouter dans la partie HTML

Pour activer chart.js, il suffit d'inclure l'url vers son code source dans une balise script à l'intérieur de l'entête du document HTML (élément head) :

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Il est ensuite nécéssaire de créer un élément HTML canvas dans lequel sera affiché le graphique. Pour le moment cet élément peut être vide, par contre il est nécessaire de lui assigner un id afin de permettre à JavaScript de s'y référencer.

<canvas id="id_canvas"></canvas>

Ce qu'il faut ajouter dans la partie JS

Un graphique ChartJS se construit en créant une variable JavaScript de type Chart. La création d'une telle variable se fait avec le mot clé new et nécessite que l'on indique 2 paramètres :

var myChart = new Chart(parametre1,parametre2);

Voici un exemple de création d'un graphique en barres :

<canvas id="id_canvas"></canvas>

<script type="text/javascript">
  var cb = document.getElementById("id_canvas");

  var data_dict = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45]
      }]
  };

  var config = {type:"bar",data:data_dict,options:{}};

  var chart1 = new Chart(cb,config);

</script>

Le code ci-dessus permet de produire le graphique suivant :

En combinant ces différentes fonctionnalités, vous pouvez par exemple aboutir à un graphique semblable à celui ci-dessous :

Dimensions du graphique : afin de modifier la taille d'un graphique, vous pouvez l'imbriquer dans une div et assigner une règle CSS sur les dimensions de cette div (par exemple width:50%).

Autres types de graphiques (camemberts, lignes, etc.) : référencez-vous à la page d'exemples