Voir le résultat du tutoriel

Structure de ce tutoriel Highcharts

Pour ce tutoriel, nous allons utiliser la structure de fichier suivante :

• fichier index.html
• fichier main.js (contient le code pour le graphique)
• On appelle Highcharts & jQuery via un CDN

Fichier index.html qui va accueillir le graph Highcharts

  

  Données 1 :  - 

  Données 2 :  - 

  Données 3 :  - 

  Données 4 :  - 

  Recharger le graphique
  
  
  

Ici, rien de bien compliqué, on fait juste créer un fichier HTML5 en appelant le fichier main.js et les 2 librairies Highcharts et jQuery. Puis on construit un formulaire.

Fichier main.js

Le fichier main.js va accueillir le code qui va nous servir à créer le graph mais aussi le code qui va permettre de recharger le graph avec de nouvelles données saisies par l’utilisateur dans un formulaire.

Découpons un peu le code! Premièrement, nous allons mettre en place la fonction qui va générer le graphique au chargement de la page (la première fois). Notez que l’on assigne ce graphique à la variable document.chart, ceci dans le but de pouvoir accéder facilement plus tard à notre variable. (voir la portée des variables en Javascript).

Fonction qui affiche le graphique

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) {
         
          document.chart = new Highcharts.Chart({
      chart: {
         renderTo: 'pieChart',
         width: 598,
         height: 450,
         marginLeft: 25,
         marginRight: 25,
      },
      colors: colors,
      title: {
         text: "Il faut manger des fruits",
         margin: 10
      },
      tooltip: {
         formatter: function() {
            return "Nombre: " + parseInt(this.y) ;
         }
      },
      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',
         name: 'fruits',
         data: data
      }]
   });
         
         
     }

Ensuite, nous allons créer la fonction qui va prendre en charge la lecture du formulaire et le rechargement du graphique en fonction des nouvelles données.

Fonction qui va recharger le graphique

function getDataFromUser(){

  var value   = [];
  var titre   = [];
  var data    = [];
 
  $("#data .value").each(function(i,e){
    value.push(parseInt($(e).attr("value")));
  });

  $("#data .titre").each(function(i,e){
    titre.push($(e).attr("value"));
  });
 
  $.each(titre, function(i,e){
    var inside  = [];
    inside.push(e);
    inside.push(value[i]);
    data.push(inside);
  })
 
  return data;
}

Quelques explications :

Ici on va aller lire à l’aide de jQuery les valeurs entrées dans le formulaire. On sélectionne, #data .value (la série qui contient les chiffres) et #data .titre (la série qui contient les titres). On insère ces nouvelles données dans des array Javascript à l’aide de la méthode push. On utilise la fonction parseInt pour s’assurer que les valeurs seront bien des integers. Il faudrait pousser plus loin la vérification des données du formulaire dans un cas réel mais pour ce tutoriel, ça suffira amplement.

Finalement : Document ready de jQuery pour binder les actions

$(function() {
  var data = getDataFromUser();

  $.displayPieChart(colors, data);
 
  $("#button").click(function(){
    var data = getDataFromUser();
   
    document.chart.series[0].setData(data);
    document.chart.redraw();
   
  })
});

Ce bout de code permet donc dans l’ordre de :

• Récupérer les données du formulaire via la fonction getDataFromUser
• Initialiser le graphique au chargement de la page en appelant la fonction displayPieChart.
• Binder (lier) le click sur le bouton(#button) le rechargement du graphique avec les nouvelles données

Conclusion

Voici donc le résultat de ce tutoriel sur Highchart, j’espère que ça vous sera utile. N’hésitez pas si vous des questions / remarques en commentaires.

Voir le résultat du tutoriel

Highcharts arrive à maturité

Il est interessant de voir que le journal Le Monde se sert de cette librairie pour exposer des graphiques sur son site. Serait-ce l’âge de la maturité enfin arrivé pour cette librairie ô combien géniale ! 

Je dois dire que je vois de plus en plus de réalisation graphique faites avec Highcharts. Je pense personnellement que la visualisation de données se démocratise et que des fois un graphique vaux 1000 mots.

Voici l’article en question : Impôts : ce que vous allez vraiment payer

Conclusion 

Je vous rappelle que pour vos tests Highcharts, le site data.gouv.fr est très interessant et possède un grand nombre de dataset pertinents.

Ressources 

• Article Le Monde
• Le site de la librarie Highcharts

Que va t’on apprendre dans ce tutoriel sur Highcharts ?

• Comment charger des données via AJAX dans Highcharts
• Comment ajouter un 2ème axe Y à un graphique pour comparer des valeurs d’ordre différent.
• Comment travailler les labels des axes X et Y
• Comment insérer plusieurs séries de données dans un graph

Charger des données via AJAX dans Highcharts

Pour charger des données via AJAX dans Highcharts, il s’agit de construire un objet javascript contenant les options qui vont servir à générer le graph, il suffit donc de déclarer un objet et de lui attribuer les options de bases : 

var chart;
var colors = ["#98DF8A", "#FFBB78", "#8C564B"];
var options = {};

options.chart = {
  renderTo: 'essenceChart',
  width: 588,
  height: 400,
  marginTop: 70,
  marginLeft: 100,
  marginRight: 100,
  type:'line'
};

options.credits = {
  enabled: false
};

options.colors = colors;

options.title = {
  text: "Évolution du prix de l'essence et du baryl de pétrole de 1995 à 2012",
  margin: 10
};

options.tooltip = {
  formatter: function() {
    return "Dépense : " + number_format(this.y,3,',',' ') + "€" ;
  }
};

Définition des variables

On créer la variable « chart » qui va servir à instancier le graphique plus tard.
On créer la array « colors » pour définir ses couleurs personnelles et ainsi overwriter les couleurs par défaut.
On créer l’objet « options » qui va contenir tous les paramètres définissant le graphique.

Définition des paramètres du graph

« options.chart » représente les paramètres généraux du graph. On va pouvoir renseigner le type, la taille, les margins, le container …
« options.credits » permet de supprimer le lien vers Highcharts en bas à droite
« options.colors » définit les couleurs à utiliser (couleur par défaut si non renseigné)
« options.title » permet de donner un titre au graphique
« options.tooltip » permet de formater l’affichage du tooltip (étiquette au passage de la souris)

Créer 2 axes Y dans Highcharts

Le but de créer de axe Y est de pouvoir comparer 2 valeurs d’ordre différent. Dans notre exemple, on va comparer le prix de l’essence en euro avec une valeur autour de 1€ et le prix de baryl de pétrole en $ autour de 50$. Vous voyez où je veux en venir ?

options.yAxis = [
  {
    title : {
      text: "Gazoil & Super 95 (€)"
    },
    labels: {
    formatter: function() {
      return this.value +' €';
    },
    style: {
      color: '#000'
    }
  }
  },{
  title: {
    text: "Baryl brent ($US)"
  },
  labels: {
    formatter: function() {
      return this.value +' $';
    },
    style: {
      color: '#8C564B'
    }
  },
  opposite: true
}];

Je pense que la définition de l’objet parle d’elle même, en gros on créer un array contenant deux objets définissant chaque axe. La beauté de Highcharts réside dans le fait qu’elle va s’occuper de mettre à l’échelle les axes en fonction des valeurs fournis, donc rien à faire de ce côté là.

Mettre en place l’axe des X avec une rotation des labels

options.xAxis = {
  categories: [],
  labels: {
    rotation: -45,
		y: 20
  }
};

Encore une fois c’est assez parlant, vous pouvez jouer avec la valeur de rotation du label pour arriver au résultat souhaité.

Insérer plusieurs dataset dans un graphique

Cela se traduit par insérer plusieurs courbe dans notre graphique avec pour chaque courbe ses valeurs propres.

options.series = [
  {
    name: 'Gazoil (€)',
    data: []
  },
  {
    name: 'Super 95 (€)',
    data: []
  },
  {
    name: 'Baryl de pétrole ($US)',
    yAxis: 1,
    data: []
  }
]

Ici nous créons donc un array de series, chaque element de cet array est un objet définissant le nom et le array qui recevra les données via ajax.

Préparation du fichier HTML qui va recevoir le graphique

<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Prix essence illustré avec Highcharts</title>

<meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=UTF-8&amp;quot; />

<!-- Libs -->
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;../js/Highcharts-2.1.9/js/highcharts.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;../js/utils.js&amp;#039;></script>
<script type=&amp;#039;text/javascript&amp;#039; src=&amp;#039;main.js&amp;#039;></script>

</head>
<body style=&amp;#039;margin:0px;&amp;#039;>
<div class=&amp;#039;wrapper&amp;#039;>
<div id=&amp;#039;essenceChart&amp;#039;></div>
</div>

</body>
</html>

Chargement des données dans Highchart

Pour charger les données en ajax, j’utilise ici la methode get de Jquery pour aller lire le fichier de donnees JSON. Il suffit ensuite de manipuler les données dans votre fonction de callback pour aller nourrir les array de data de chacune de vos series. On en profite pour créer les categories (les labels) qui apparaîtrons sur l’axe des X.

$.getJSON('https://undisconnected.com/sandbox/highcharts-essence/prix-essence.json', function(essence) {

    $.each(essence, function(i,e){

      var theDate = new Date(parseInt(i),0,1);

      options.series[0].data.push(e.gazoil);
      options.series[1].data.push(e.super95);
      options.series[2].data.push(e.brent);
      options.xAxis.categories.push(i);

    })
    console.log(options.categories)
    chart = new Highcharts.Chart(options);

  });

Le resultat

Conclusion

J’espère que vous aurez pris plaisir à suivre ce tutoriel. Highcharts permet de customiser vos graphiques en javascript de manière simple, efficace et rapide. Comme vous le voyez, faire ce graphique n’est pas une tâche ultra complexe et pourtant le résultat obtenu est vraiment interessant.

Ressources :

• Le fichier javascript au complet
• Highcharts

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

<!DOCTYPE HTML>
<html>
<head>
<title>Undisconnected - Exemples librairie js Highcharts</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Libs -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.2/highcharts.js'></script>
<script type='text/javascript' src='../js/utils.js'></script>
<script type='text/javascript' src='data.js'></script>
<script type='text/javascript' src='main.js'></script>

</head>
<body style='margin:0px;'>
<div class='wrapper'>

<div id='pieChart'></div>
  
  
</div>
</body>
</html>

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 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.

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

1. Facilité d’emplois
2. Paramétrable à souhait avec un objet JSON
3. Le rendu est vraiment beau
4. Les types de graphiques (pie chart, bar graph, bubble graph, timeline, …)
5. Le module d’export intégré (JPEG, PDF, SVG, PNG)
6. 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 :

• Le site officiel de Highcharts
• La documentation de Highcharts