1.Introduction

Qui n'a jamais eu à réaliser un graphique à partir d'une série de nombres ? Pour ma part j'en ai fait plus que de raison. Maintenant imaginez en réaliser un en le programmant en javascript. Bonjour la galère !

Mais ce n'est pas grave car des gens bien pensants ont réalisé Chartist.js, une bibliothèque javascript pour réaliser des graphiques sous forme de courbes, nuages de points, graphiques à barre ou camenberts. Et tout cela à l'aide de quelques lignes de code seulement.

Jugez en par vous même:

Ces graphiques ont été réalisés avec le code suivant:

var data = {
   labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
   series: [
    [18, 12, 2, -12, 0],
    [0, 5, 15, 16, 8],
    [-15, 12, 18, 11, -4]
  ]
};
Chartist.Line('.ct1', data);
var data = {
  series: [5, 3, 4]
};

var sum = function(a, b) { return a + b };

Chartist.Pie('.ct2', data, {
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
});
var data3 = {
  labels: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
    [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
  ]
};

var options = {
  seriesBarDistance: 10
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('.ct3', data3, options, responsiveOptions);

Et c'est tout ! Reconnaissez que c'est assez bluffant.

2. Mise en place

Tout d'abord, il vous faut récupérer les fichiers suivants:

• chartist.min.css
• chartist.min.js
• chartist.min.map

Placez chartist.min.js et chartist.min.map parmi les fichiers de votre blog.

Copiez le contenu de chartist.min.css et collez le dans Apparence/Modifier le thème/Ajouter du css

3. Utilisation

Lorsque vous souhaitez utiliser un graphique dans votre article ou dans votre page, chargez le script avec le code suivant en veillant à mettre l'url correspondant à votre fichier et en le mettant dans le code source de votre page/article ( bouton <> de l'éditeur):

<script src="http://ekladata.com/n9TxtVW6hpNT5chqHXrUpHtK0B0/chartist-min.js"></script>

A l'endroit ou vous souhaitez faire apparaître le graphique, créez une div en lui donnant les classes ct-chart et une classe pour le ratio (pas obligatoire - voir chapitre suivant). 

<div class="ct-chart ct-octave"> </div>

Enfin placez votre code javascript (de préférence à la fin de l'article ou de la page) comme ceci:

<script>
onJSFilesLoaded.push(function(){
var data = {
   labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi'],
   series: [
    [18, 12, 2, -12, 0],
    [0, 5, 15, 16, 8],
    [-15, 12, 18, 11, -4]
  ]
};
Chartist.Line('.ct-chart', data);
});
</script>

4. Réglages

De nombreux ratios sont prédéfinis pour l'apparence de vos graphiques. Il suffit d'indiquer la classe correspondante à votre <div>