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>

1. Présentation

Faire des animations en CSS3, c'est sympa. Mais disposer d'une bibliothèque javascript qui permet de les créer facilement, c'est encore mieux. Couleurs, rotations, opacité sont autant d'éléments gacilement modifiables grâce à Velocity.js . Mais rien de tel qu'un aperçu:

Bref, vous l'avez compris, Velocity permet de faire des choses très sympa.

Ce script est compatible avec JQuery mais peut être utilisé sans ce dernier. (Pour mémoire, l'utilisation de JQuery pose quelques problèmes sur Eklablog. Voir l'article sur le sujet).

2. Mise en place

Comme d'habitude, il faut charger un script.

Téléchargez le ici: Velocity.js

Enregistrez le parmi les fichiers de votre blog et récupérez son url.

Pour l'inclure sur votre blog, il vous suffit de placer cette ligne:

<script src="url de votre fichier"></script>

3. Utilisation

Voilà le script chargé. Maintenant il faut pouvoir s'en servir. Dans les exemples qui suivent, on va l'appliquer sur un élément qui a l'id "monelement"

On va cibler cet élément avec la commande $("monelement") qui est un raccourci mootools et qui correspond au code javascript suivant: document.getElementById("monelement")

Exemple 1 - Rotation selon X

Velocity($("monelement"),{rotateX: "60deg"},{duration:3000});

Dans cet exemple, on applique une rotation selon X de 60 degrés sur une durée de 3000 ms (3 secondes). Les fonctions rotateY et rotateZ sont également disponibles

Exemple 2 - Déplacement

Velocity($("monelement"),{left: 150, top:200},{duration:1000});

Ici on déplace l'élément (qui doit être en position:relative) de 150 px horizontalement et 200 px verticalement pendant 1 seconde

Exemple 3- Opacité

Velocity($("monelement"),{opacity:0},{duration:2500});

Ici on rend l'élément transparent en 2,5 secondes.

Exemple 4 - Combinaison

On peut combiner plusieurs propriétés dans la même transformation comme par exemple:

Velocity($("monelement"),{opacity:0, left:200, top:300, rotateX:"20deg"},{duration:2000});

Dans ce cas, toutes les transformations s'effectuent simultanément. Si l'on souhaite les appliquer les unes à la suite des autres, on lancera plusieures commandes:

Velocity($("monelement"),{opacity:0},{duration:500});
Velocity($("monelement"),{left:200},{duration:500});
Velocity($("monelement"),{top:300},{duration:500});
Velocity($("monelement"),{rotateX:"20deg"},{duration:500});

Exemple 5 - SVG

Velocity($("rect"),{delay:500});
Velocity($("rect"),{ x: "+=200", y: "25%" });
Velocity($("rect"),{ fillGreen: 255, strokeWidth: 10 });
Velocity($("rect"),{ height: 50, width: 50 });
Velocity($("rect"),{ rotateZ: 90, scaleX: 0.5 });
Velocity($("rect"),"reverse", { delay: 250 });

Velocity fonctionne aussi sur les graphismes SVG. Voir le site officiel pour plus d'informations.