Les langages du web > Le Javascript > Free Charting Libraries

Chartist

L'extrême légèreté de cette library (40 Ko) est son principal atout.

Ainsi, à l'instar des fichiers w3P.js et w3P.css, les fichiers chartist.min.js et chartist.min.css ont leur place à la racine de tout site web.

apexChart offre plus de fonctionnalités, mais est 12 fois plus lourde ...

De plus, en permettant l'affichage de line, bar and pie (+ donut, gauge) chart, cette library est suffisante dans la majorité des cas.

Enfin, un graphique peut facilement être personnalisé.

Version 0.11 = 2019-09-11

Site officiel, The easiest way to get started, Documentation

La documentation officielle est améliorable, car les fonctionnalités ne sont présentées que dans le code des exemples.
La présente page vise à être plus pratique en listant les fonctionnalités les plus intéressantes.

Exemple de base

Pour afficher un graphique dans un navigateur web, 4 fichiers sont nécessaires :un fichier HTML (qui appelle les autres fichiers), un fichier CSS, deux fichiers JS.

  1. Dans le <head> :

    • Le fichier HTML est lié au fichier CSS qui gère l'apparence (minimale)
      <link rel="stylesheet" href="chartist.min.css" />

      Pour consulter le fichier CSS spécial : chartist.min.css
      Pour télécharger le fichier : chartist.min.css (12 Ko)

    • Le fichier HTML est lié au fichier JS qui gère l'affichage du graphique
      <script src="chartist.min.js"></script>

      Pour consulter le fichier JS spécial : chartist.min.js
      Pour télécharger le fichier : chartist.min.js (40 Ko)

  2. À la fin du fichier HTML :

    • Le fichier HTML est lié au fichier JS qui contient les données utilisé pour créer le graphique
      <script src="test.js"></script>

      Ici, le fichier test.js peut être consulté ici

Enfin, dans le fichier HTML, il faut créer un conteneur — ici, une <div> — pour le graphique.
Et, identifier ce conteneur via l'attribut id. La valeur est, ici, chart1
<div class="ct-major-tenth" id="chart1"></div>

Code HTML : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="chartist.min.css" />
    <script src="chartist.min.js"></script>
    <title>Test</title>
  </head>
  <body>
    <div class="ct-major-tenth" id="chart1"></div>
    <script src="test.js"></script>
  </body>
</html>

Code HTML plus simple, tu meurs !

Code JS : (test.js)

Les choses sérieuses commencent ici. 

  var data = {
    /* A labels array that can contain any sort of values */
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    /* Our series array that contains series objects or in this case series data arrays */
    series: [
      [5, 2, 4, 2, 7]
    ]
  };

  var options = {

  }

  /* Create a new line chart object where as first parameter we pass in a selector
     that is resolving to our chart container element. The Second parameter
     is the actual data object. */
  new Chartist.Line('#chart1', data, options);

En réalité, si on enlève les commentaires ... 

  var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[5, 2, 4, 2, 7]]
  };
  var options = {};
  new Chartist.Line('#chart1', data, options);

... 6 lignes
Et, on aurait pu faire encore plus court, mais le code serait devenu illisible.

Pour voir le résultat : test.htm

Pas terrible ...

Mais si, dans le code JS, on modifie la variable options :

  var options = {
    fullWidth: true,
    showArea: true
  }

Le résultat est meilleur : test2.htm

Avant d'utiliser avec les options, abordons une notion simple. Le rapport entre la largeur et la hauteur du graphique. Ce rapport est appelé le ratio.

Ratio

Un rapport "1" signifie que la hauteur sera égale à la largeur de la balise qui contient le graphique.

Un rapport "2:5" signifie que la hauteur sera égale à 40 % de la largeur de la balise qui contient le graphique.

Avec le rapport "9:16" (.ct-minor-seventh), l'image sera trop haute pour un écran 9/16 ... car le navigateur utilise d'une partie de la hauteur pour afficher sa barre de menu. Toutefois, le designer peut décider que le graphique n'occupera pas toute la largeur de l'écran. Il choisira alors le ratio parmi les suivants : 

Container class     Ratio

.ct-square          1        1.0000
.ct-minor-second    15:16    0.9375
.ct-major-second    8:9      0.8889
.ct-minor-third     5:6      0.8333
.ct-major-third     4:5      0.8000
.ct-perfect-fourth  3:4      0.7500
.ct-perfect-fifth   2:3      0.6667
.ct-minor-sixth     5:8      0.6250
.ct-golden-section  1:1.618  0,6180
.ct-major-sixth     3:5      0.6000
.ct-minor-seventh   9:16     0.5625
.ct-major-seventh   8:15     0,5333
.ct-octave          1:2      0.5000
.ct-major-tenth     2:5      0.4000  ***
.ct-major-eleventh  3:8      0.3750
.ct-major-twelfth   1:3      0.3333
.ct-double-octave   1:4      0.2500

Ce nom de class (sans le point) est la valeur de l'attribut HTML class dans la balise servant de conteneur pour le graphique. 

<div class="ct-major-tenth" id="chart1"></div>

Maintenant que vous savez tout ce qu'il faut savoir, coté HTML, pour afficher un graphique simple. Et avant d'aborder les options — car, nous en savons déjà suffisamment — étudions comment encoder les données.

Data

labels:

La clé labels permet d'afficher des étiquettes sur l'axe des x. 

labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']

series:

La clé, series permet d'afficher une ou plusieurs séries de données (lignes).

Il est donc possible d'afficher plusieurs courbes dans un même graphique. 

series: [
  [12, 9, 7, 8, 5],
  [2, 1, 3.5, 7, 3],
  [1, 3, 4, 5, 6]
]

Pour voir le résultat : test3.htm
Pour voir le code JS : test3.js

Avant de coloriser les lignes (= personnaliser l'apparence), abordons les options.

Options

Les options permettent de modifier l'apparence.

Le constructeur admet un troisième paramètre. Un objet (graphique) peut être créé en écrivant : 

new Chartist.Line('.ct-chart', data, options);

Comme la variable data, la variable options est une variable objet de type clé:valeur.

Les variables data et options doivent être déclarées et initialisées avant d'être utilisées dans le constructeur.

La variable data doit être déclarée et initialisée avant la variable options, si elle contient des valeurs qui seront utilisées dans la variable options, tel que le nom d'une série. 

var options = {
  /* If high is specified then the axis will display values explicitly up to this value
   and the computed maximum from the data is ignored */
  high: 100,

  /* If low is specified then the axis will display values explicitly down to this value
   and the computed minimum from the data is ignored */
  low: 0,

  /* This option will be used when finding the right scale division settings.
   The amount of ticks on the scale will be determined so that as many ticks as possible
   will be displayed, while not violating this minimum required space (in pixel). */
  scaleMinSpace: 20,

  /* Can be set to true or false. If set to true, the scale will be generated with
   whole numbers only. */
  onlyInteger: true,

  /* The reference value can be used to make sure that this value will always be on the chart.
   This is especially useful on bipolar charts where the bipolar center always needs
    to be part of the chart. */
  referenceValue: 5

  /* If specified then the value range determined from minimum to maximum (or low and high)
   will be divided by this number and ticks will be generated at those division points.
    The default divisor is 1. */
  divisor: 4,

  /* If ticks is explicitly set, then the axis will not compute the ticks with the divisor,
   but directly use the data in ticks to determine at what points on the axis a tick need
    to be generated. */
  ticks: [1, 10, 20, 30]

  /* Don't draw the line chart points */
  showPoint: false

  /* Disable line smoothing */
  lineSmooth: false

  /* X-Axis specific configuration */
  axisX: {

    /* We can disable the grid for this axis */
    showGrid: false

    /* and also don't show the label */
    showLabel: false
  }

  /* Y-Axis specific configuration */
  axisY: {
    /* Lets offset the chart a bit from the labels */
    offset: 60

    /* The label interpolation function enables you to modify the values
       used for the labels on each axis. Here we are converting the
       values into million pound. */
    labelInterpolationFnc: function(value) {
      return '$' + value + 'm';
    }
  }

};

fullWidth:

En l'absence de la clé fullWidth, toutes les données ne sont pas affichées sur toute la largeur. Le bord droit ne correspond pas à une donnée.

Pour afficher toutes les données sur toute la largeur,
sa valeur doit être true.

showPoint:

En l'absence de la clé showPoint, la valeur d'une donnée est représentée par un point.

Pour afficher les points,
sa valeur doit être true.

low:

En l'absence de la clé low, le bas du graphique est lié à la donnée la plus basse.

Cette clé permet d'indiquer sa préférence pour le bas du graphique.
In fine, le programme le fixe.

La valeur de cette clé est un nombre (qui peut être négatif et/ou décimal)

high:

En l'absence de la clé high, le bas du graphique est lié à la donnée la plus haute.

Cette clé permet d'indiquer sa préférence pour le haut du graphique.
In fine, le programme le fixe.

La valeur de cette clé est un nombre (qui peut être négatif et/ou décimal)

showArea:

En l'absence de la clé showArea, une aire sous la courbe n'est pas affichée.

Cette clé permet d'afficher une aire sous la courbe,
si sa valeur est true.

Personnaliser l'apparence

Ceci est particulièrement utile, lorsqu'il existe différentes séries de données (différentes courbes, dans le cas d'un graphique de type .Line).

Pour personnaliser l'apparence, il faut créer un fichier CSS supplémentaire.

Pour que ce fichier soit listé sous chartist.min.css son nom débute par chartist.

Dans le code HTML (dans le head), il suffit d'ajouter un appel vers ce fichier CSS supplémentaire (par exemple, chartistMy.css) après l'appel du fichier CSS chartist.min.css. 

    <link rel="stylesheet" href="chartist.min.css" />
    <link rel="stylesheet" href="chartistMy.css">

Line chart

chartistMy.css : 

/* Use this selector to override the line style on a given series */
.ct-series-a .ct-line {
  /* Set the colour of this series line */
  stroke: blue;
  /* Control the thikness of your lines */
  stroke-width: 2px;
  /* Create a dashed line with a pattern */
  stroke-dasharray: 10px 20px;
}

/* This selector overrides the points style on line charts.
 Points on line charts are actually just very short strokes.
  This allows you to customize even the point size in CSS */
.ct-series-a .ct-point {
  /* Colour of your points */
  stroke: red;
  /* Size of your points */
  stroke-width: 5px;
  /* Make your points appear as squares */
  stroke-linecap: square;
}

Pour styliser la seconde ligne, dans ce fichier CSS, il suffit de recopier le style dédié à la première ligne (.ct-series-a), de remplacer "a" par "b", puis d'y modifier les définitions de style. 

.ct-series-a .ct-line {
  stroke: blue;
  stroke-width: 2px;
}

.ct-series-a .ct-point {
  stroke: blue;
  stroke-width: 5px;
}

/* Seconde ligne */
.ct-series-b .ct-line {
  stroke: red;
  stroke-width: 2px;
}

.ct-series-b .ct-point {
  stroke: red;
  stroke-width: 5px;
}

Pour voir le résultat : test4.htm
Pour voir le code JS : test4.js
Pour voir le code CSS : test4.css

La troisième ligne est suffixée par c.
La quatrième ligne est suffixée par d.
...
La quinzième ligne est suffixée par o.

Pour styliser davantage de lignes, il faudra modifier le code de cette library.

Plusieurs graphiques

Pour placer différents charts sur la même page web :

  1. Il faut coder en HTML différents conteneurs 

      <body>
    <div class="ct-major-tenth" id="chart1"></div>
    <div class="ct-major-tenth" id="chart2"></div>
    <script src="test.js"></script>
  </body>

  2. Puis, il faut coder en JS pour ces différents conteneurs. 

      var data1 = {
    labels: [...],
    series: [...]
  };
  var options1 = {};
  new Chartist.Line('#chart1', data1, options1)

  var data2 = {
    labels: [...],
    series: [...]
  };
  var options2 = {};
  new Chartist.Line('#chart2', data2, options2)

Exemples

Pour afficher un graphique sur un site web, l'utilisation de libraries JS est quasi obligatoire.

Ces exemples montrent qu'il n'est pas nécessaire d'utiliser un tableur pour afficher des graphiques simples ...

De plus, c'est plus rapide via un navigateur web ...

Enfin, le stockage des données peut être fait via un simple bloc-notes ! 

  var x = [
    ["2024-11", 423, 613, 1444, 3138, 171.69, 183, 1927],
    ["2024-10", 395, 507, 916, 1621, 73.66, 89, 4388],
    ["2024-09", 390, 441, 878, 1319, 69.73, 83, 1098],
    ["2024-08", 2268, 2548, 2850, 3184, 82.31, 53, 1891],
    ["2024-07", 2657, 2880, 3993, 5782, 148.57, 42, 1567],
    ["2024-06", 2650, 2846, 3708, 5207, 168.77, 63, 1508],
    ["2024-05", 2467, 2638, 3391, 5813, 231.26, 57, 1792],
    ["2024-04", 254, 314, 563, 1005, 59.53, 67, 769],
    ["2024-03", 193, 244, 499, 905, 79.37, 122, 917],
    ["2024-02", 60, 65, 178, 314, 61.77, 237, 95],
  ];

Plus condensé (tout en restant encore suffisamment lisible), tu meurs !

Version 1.3

Version 1.3 = https://github.com/chartist-js/chartist#readme

Cette version n'est pas utilisée dans ce mini-cours et elle n'est pas recommandé car :

  1. elle ne fonctionne que sur un serveur
  2. elle est codée en TypeScript (et non plus en JS)
  3. Cette library est si petite qu'elle ne requiert pas un développement modulaire.