Il existe une petite librairie qui permet de générer des graphiques sans connaissances particulières en SVG. Il s’agit de Chartist.js.
La force de Chartist.js est sa simplicité qui est en même temps sa faiblesse. En effet le code est très simple mais il n’y a pas beaucoup de diversité dans les types de graphique. Nous n’avons droit que à trois types de graphique : en ligne, en barre et en tarte. Il est possible d’en ajouter un quatrième en faisant un trou au milieu du graphique pour en faire un donut ou une jauge.
Mise en place
Chartist est simple à mettre en place il suffit d’insérer la feuille de style CSS et le fichier JavaScript.
| 1 | <script src= »//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js »></script> |
Dans le BODY, on ajoute une DIV où le code SVG généré par Chartist sera inséré. Et on ouvre une balise script dans laquelle on insérera un code d’exemple de Chartist figurant sur le site.
| 12 | <div id= »bar-chart » class= »ct-chart »></div><script type= »text/javascript »></script> |
Dans la variable data, un tableau labels peut contenir toute sorte de valeurs. Notre tableau contient des séries de données. Comme options, nous pouvons définir une taille de 300×200 px pour un graphique statique. Nous pouvons également omettre ces paramètres pour avoir un graphique responsive. Nous allons créer un nouvel objet Chartist de type Bar. Nous passons comme premier paramètre un sélecteur qui est celui qui va sélectionner notre DIV. Le second paramètre est l’objet des données. En troisième paramètre nous passons dans nos options personnalisées.
| 123456789101112 | var data = { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [ [5, 2, 4, 2, 0] ]};var options = { width: 300, height: 200};new Chartist.Bar(‘.ct-chart’, data, options); |
Très bien ça marche ! Maintenant on va essayer de présenter les données venant d’un fichier JSON. On va générer un fichier JSON grâce a generatedata.com. Dans la ligne : Colonne “title” mettre “name” et dans “data type” choisissez “Names”. Ensuite choisissez le genre de votre choix. Dans la ligne 2 : Colonne “title” mettre “age” et dans “data type” choisissez “Number Range”. Ensuite dans “options” on entre between 18 and 25. Cliquez sur le tab JSON dans “Export type”, cliquez sur “Simple”. Prenons l’option “Prompt to download” et enfin on clique sur “Generate”. Le navigateur va nous proposer de télécharger un fichier, on va le nommer : data.json Il ne nous reste plus qu’à inclure jQuery dans nos scripts et nous sommes prêt.
| 1 | <script src= »//code.jquery.com/jquery-1.11.2.min.js »></script> |
Dans notre code nous allons attendre que le document soit chargé avec « document ready ». Nous allons crée la fonction onJsonReady qui servira de callback quand le fichier JSON sera chargé. Il y a plusieurs manières de faire un appel Ajax en jQuery et dans notre cas getJSON fera bien le travail. Nous lui passons comme premier argument l’URL du fichier json, ici « data.json ». En deuxième argument onJsonReady.
Nous voulons dessiner le graphique quand nos données sont chargées. Alors il va falloir mettre tout notre code de Chartist dans la fonction onJsonReady.
| $(document).ready(function() { function onJsonReady(json) { console.log(json) var data = { labels: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’], series: [ [5, 2, 4, 2, 0] ] }; var options = { width: 300, height: 200 }; } new Chartist.Bar(‘.ct-chart’, data, options); } $.getJSON(« data.json », onJsonReady);}); |
A cette étape, il n’y a pas grand chose qui change. Sauf lorsqu’on fait console.log de json on obtient le contenu du fichier JSON dans un tableau.
2. Préparation des données
Nous allons commencer par ranger toutes les personnes par leurs ordre d’âge. Et pour ranger en ordre croissant nous utiliserons sort.
| 123 | json.sort(function(a,b){ return a.age – b.age;}) |
On va créer un tableau labelsData pour stocker les étiquettes de notre graphique.
Nous allons aussi devoir regarder si chaque élément du tableau existe déjà dans labelsData.
Pour ce faire, on va utiliser IndexOf. Si il trouve la valeur dans le tableau, il va retourner la clé de la valeur sinon il va retourner -1 pour dire qu’il ne trouve pas.
Donc si la valeur age est déjà dans le tableau, il ne la rajoute pas.
| 123456 | var labelsData = [];json.forEach(function(person, key){ if(labelsData.indexOf(person.age) == -1){ labelsData.push(person.age); }}); |
On va préparer un tableau serieData. 0n va y mettre les comptes des personnes de chaque âge. Nous allons compter les occurrences de chaque nombre dans les âges dans une boucle.
Nos âges se trouvent dans le tableau labelsData. Donc pour chaque âge, on prépare une variable pour compter qui commence à zero.
Et dans une autre boucle cette fois-ci, on va passer en revue toutes les personnes dans le JSON et on va comparer si leurs âges correspondent au label courant dans la boucle.
Si les deux âges ont la même valeur, on incrémente. Sinon on ne fait rien.
On sauve la valeur dans le tableau serieData en faisant push dans le tableau.
| 12345678910 | var serieData = [];for(var i = 0; i < labelsData.length; i++) { var count = 0; for(var j = 0; j < json.length; j++) { if(labelsData[i] == json[j].age) { count++; } }; serieData.push(count);}; |
3. Configurer Chartist
Pour finir, il suffit de remplacer le tableau labels dans notre objet data par celui que nous avon préparé labelsData.
Et ensuite de faire de même avec serieData que l’on va mettre dans le tableau qui se trouve déjà dans series.
| 1234567891011 | var data = { labels: labelsData, series: [serieData]};var options = { width: 300, height: 200};new Chartist.Bar(‘#bar-chart’, data, options); |
Le graphique serait beaucoup mieux en horizontal. Je vais alors aller dans l’objet option et y ajouter les paramètres suivants :
| 123456789101112131415 | var options = { width: 300, height: 200 horizontalBars: true, axisX :{ showGrid: true, offset: 60, // décalage labelInterpolationFnc: function(value) { return Math.round(value) ; } }, axisY : { showGrid: false }}; |
La clé labelInterpolationFnc permet d’exécuter une fonction pour chaque valeur des étiquettes. Ici, on va retourner la valeur arrondie grâce a Math.round.
4. Animation
Pour le rendre plus sympa, nous allons animer notre graphique. Pour cela on doit assigner l’objet Chartist à une variable pour pouvoir la manipuler plus tard.
| 1 | var myBarChart = new Chartist.Bar(‘#bar-chart’, data, options); |
L’événement draw va être exécuté lorsque Chartist va vouloir dessiner le graphique. Pour chaque élément SVG dessiné par Chartist, nous allons déclencher des animations SMIL si celui-ci est de type bar.
JavaScript
| 123456789101112131415 | myBarChart.on(‘draw’, function(data) {if(data.type === « bar ») { console.log(data) data.element.animate({ x2: { begin: data.index * 1000, dur: 1000, from: data.x1, to: data.x2, easing: Chartist.Svg.Easing.easeOutQuart }});}}); |
Je vous conseille de faire un console.log de data dans la fonction pour voir les propriétés animables.
Vous pouvez bien sûr inspecter l’élément SVG généré et faire vos propres animations avec du CSS3.
Pour plus d’exemples, je vous recommande fortement d’aller voir sur le site de Chartist.js. Les exemples sont très bien faits.Cette article a été publiée dans librairie. Bookmarquez ce permalien.