Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel

Imatt — Mon, 20 Feb 2012 18:41:06 +0000

Voici comme promis avec un peu de retard la suite du post sur Highchart la fameuse librarie javascript pour faire des graphiques. La partie 2 sur 3 sera donc consacré à un tutoriel pour démarrer avec la librarie.

Comme je viens de découvrir un site qui va bien m’amuser (j’ai nommé data.gouv.fr), je vais utiliser un des datasets proposés par ce site. J’ai décidé d’illustrer donc notre premier exemple de cette librarie Highcharts avec les données des dépenses de la sécurité sociale en France continentale par Région pour le mois de Janvier. (voici le dataset que je vous donne en json). Attention les chiffres sont impressionnants.

Préparation

Pour commencer allez sur le site de Highcharts et téléchargez la librairie. Créez un fichier index.html comme ceci :

Le fichier index.html




Undisconnected - Exemples librairie js Highcharts

On charge les fichiers suivants :

Jquery (via google api)
Highchart (mettre le bon chemin vers highcharts que vous avez télécharger)
Fichier utils.js (expliqué en dessous)
Fichier data.js (Le fichier data de l’exemple)
Main.js (le fichier qui va contenir notre code javascript pour lancer highcharts)

Le fichier utils.js est un fichier qui comprends des fonctions javascript que j’utilise souvent. La plupart de ces fonctions proviennent de php.js (voir mon post à propos de php.js). – Télécharger le fichier utils.js

Le fichier main.js

$(document).ready(function() {

  $.displayPieChart(colors, data);

});

var colors = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"];

$.displayPieChart = function(colors, data) {

		var chart;

		var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Dépenses SECU janvier par région",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Dépense : " + number_format(this.y,0,',',' ') + "€" ;
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  return "" + this.point.name.toLowerCase() + "";
               }
            }
         },
         series: {
            dataLabels: {
                enabled: true,
                color: 'black',
                fontSize: 3
            }
        }
      },
       series: [{
         type: 'pie',
         data: data
      }]
   });

	}

Dans ce fichier on crée une fonction $.displayPieChart qui paramètre notre graphique.

Le array color représente les couleurs que l’on va utiliser pour notre graphique (je les change car j’aime mieux ce set de couleur que celui par défaut).

On appelle ensuite la fonction $.displayPieChart au document ready en passant 2 paramètres, la variable data (représente le dataset contenu dans data.js) et le array color.

Le résultat

Voici un beau camembert présentant les dépenses de la sécu au mois de janvier réparties par régions.

Conclusion

Comme vous pouvez le voir, un diagramme circulaire (camembert) est assez facile à mettre en place avec Highcharts. Aussi comme c’est mon premier tutoriel (d’une grande lignée j’espère) j’attend vos commentaires avec impatience pour améliorer ce post et les tutoriaux suivants.

Bientôt d’autres exemples avec Highcharts qui seront un peu plus avancés.

The post Highcharts une librairie javascript pour les graphs – 2/3 – Tutoriel first appeared on Undisconnected.

Highcharts une librairie javascript pour les graphs – 1/3 – Présentation

Imatt — Wed, 07 Sep 2011 01:03:54 +0000

Je vais vous parler d’Highcharts, une librairie Javascript vraiment bonne pour faire des graphiques. Cette librairie a été construite et est maintenu par la compagnie Norvégienne Highslide Software. Elle est gratuite pour des projets personnels et coûte quelques deniers pour un usage commercial.

J’utilise Highcharts presque quotidiennement pour ma job et je dois avouer que je suis assez content de l’avoir choisi pour plusieurs raisons :

Facilité d’emplois
Paramétrable à souhait avec un objet JSON
Le rendu est vraiment beau
Les types de graphiques (pie chart, bar graph, bubble graph, timeline, …)
Le module d’export intégré (JPEG, PDF, SVG, PNG)
Cross navigateur (fonctionne en VML et en SVG)

1 – La facilité d’emplois

En effet Highcharts est très simple d’utilisation. On est en plein dans le plug&play ! Il suffit d’ajouter le script Javascript et la feuille de style pour commencer à apercevoir la puissance de l’outil. Vous verrez dans la suite de ce tutoriel complet sur Highcharts (partie 2/3) comment faire un premier graphique. Vous allez vite comprendre que ce n’est pas sorcier !

2 – Paramétrable à souhait avec un objet JSON

Le paramétrage de Highcharts s’effectue à l’aide d’un objet JSON. Les paramètres sont assez larges et permettent de configurer tout ce qui peut être utile dans un graphique. Le type de graph, la légende, les échelles, les labels, les axes … On peut aussi ajouter des évènements comme onClick, onMouseOver …

3 – Le rendu est vraiment beau

C’est toujours une question de goût mais je dois dire que j’ai testé quelques librairies Javascript dans ce type et que celle-ci m’a tapé dans l’oeil. Les transitions au chargement du graphique sont vraiment belles et fluides. On peut également paramétrer les couleurs et tous les éléments des graphiques ce qui permet de l’adapter facilement dans sa charte graphique. Parlez-en à votre graphiste, il comprendra

4 – Les types de graphique

Vous retrouvez dans Highcharts de quoi faire n’importe quel type de graphique : Bar, pie, donut, scatter, bubble, line, stacked, spline, area, timeline. Il est aussi possible de combiner plusieurs type de graph sur un même canvas avec des axes différents, ce qui se révèle être l’arme ultime de la librairie. Un mode permet aussi d’updater un graphique en temps réel (Voir les exemples).

5 – Le module d’export intégré (JPEG, PDF, SVG, PNG)

Highcharts propose un module d’export (fait en java) qu’il est possible d’utiliser depuis une API (à partir de leur serveur) ou que l’on peut installer en local. Encore une fois, c’est vraiment simple, si l’on active le mode d’export, le graphique se verra ajouté un petit combo-box permettant de choisir le type d’export souhaité : JPEG, PDF, SVG, PNG. Cette fonctionnalité peut paraître futile, mais je peux vous assurer que si un jour on vous demande un export, c’est un sacré gain de temps de ne pas avoir à le coder.

6 – Cross navigateur (fonctionne en VML et en SVG)

Encore une fois Highcharts marque des points puisque la librairie fonctionne sur tous les navigateurs modernes à savoir Firefox, Chrome, Safari, Opera mais aussi Internet Explorer 6, 7, 8 et 9. Les navigateurs mobiles basés sur Webkit permettent aussi d’afficher ces graphs, ce qui inclue Ipod, Iphone et Ipad.

Conclusion :

Voilà les gros points forts de cette librairie. Je concède que pour les projets commerciaux (comprenez qui rapporte de l’argent sous n’importe quelle forme), il vous faudra acheter une licence. Tout ce que je peux dire c’est que je n’est pas hésiter à dépenser les quelques 200€ pour la licence développeur. On peut ensuite l’utiliser pour n’importe quel projet. Vu le travaille qu’il y’a derrière, c’est justifié et vu le temps que l’on gagne, ça en vaut le coup.

La bonne idée est aussi d’avoir permis l’utilisation pour les projets personnels ce qui permet de vous faire une idée avant de l’acheter.

Un petit point négatif tout de même, c’est la documentation. Elle n’est pas toujours très claire et des fois on doit chercher pas mal pour trouver ce que l’on souhaite. Donc si vous avez des questions, n’hésitez pas, je pourrais peut être vous renseigner.

Références :

The post Highcharts une librairie javascript pour les graphs – 1/3 – Présentation first appeared on Undisconnected.

graph | Undisconnected