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

Créer un nouvel évènement jQuery (à utiliser comme une fonction) : 

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger(‘resizeEnd’);
    }, 500);
});

Mettre ce code dans le document ready : 

$(window).bind(‘resizeEnd’, function() {
    var wdt = $(window).width();
    alert(wdt);
});

Voilà c’est assez simple mais ça peut servir dans certain cas un peu fucké comme je viens d’avoir ! J’espère que ça vous servira

Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

• Utilisation de HTML5
• Un « reset » CSS très simple basé sur Normalize.css
• Un système de grille css (grid system)
• Un système simple de « layout »
• Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

• Un système de typographique
• Gestion des styles et « helper » pour les tableau HTML
• Gestion des éléments de formulaire
• Des boutons personnalisables (très chics)
• « helper » pour les images
• Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

• Groupes de boutons
• « Labels » et badges
• Fils d’ariane (breadcrumbs)
• « Alerts box » : Info, succès, échec, attention
• Barres de progression
• « Thumbnails »
• …

Framework Javascript

• « Modal box » très bien faites et facile à modifier
• Gestion des transitions
• Système de « tabs »
• Système de « tooltips »
• Alert javascript amélioré
• Autocompletion pour formulaire
• Système de « Popover » très bien fait
• …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

• Bootstrap home
• Wrap Bootstrap

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

• W3 School, documentation sur le SVG
• Le site de d3.js
• Approfondir sur le DOM (Document Object Model)

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

Voici le type de graphique réalisable : 

Je vous laisse regarder les exemples sur cette page : 

http://sigmajs.org/

Si quelqu’un à déjà utilisé cette librairie, je serais interessé d’avoir des avis dessus, alors laissez un commentaire. 

Pourquoi D3.js au lieu de Protovis

D’après ce que j’ai compris, Mike Bostock a décidé d’arrêter le développement  de Protovis pour commencer celui de d3.js dans le but d’offrir à tous une librarie puissante pour la visualisation basé sur des standards du W3C (HTML, SVG et CSS) au lieu de s’attacher à un framework propriétaire. D3.js est clairement axé Web et visualisation de données, ainsi il est très simple de manipuler des données via le DOM (Document Object Model).

Quelques exemples avec D3.js

Network Force Directed graph

New York Times

Cluster Layout

Cubism.js

Tag Cloud 

Choropleth

Circle Packing

Conclusion

Comme vous pouvez le voir d3.js est la source de beaucoup de type de représentations graphiques différentes mais aussi à la base de quelques libraries / plugins. Ainsi se termine la présentation (rapide je l’avoue) de la librarie d3.js. A suivre un tutoriel pour mettre en place son premier graphique avec la librarie.

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

Le « document ready » dans Jquery

C’est la fonction la plus connue et la plus utilisé des 2 fonctions que nous allons voir.

La fonction « document ready » dans Jquery permet de lancer des instructions lorsque le DOM (Document Object Model) à fini de se charger. Concrètement qu’est ce que ça veut dire ? Cela signifie que Jquery va attendre que toutes les balises HTML aient été chargées dans le document (la page web) pour exécuter les instructions à l’intérieur de cette fonction (attacher des évènements, lancer des actions qui ont besoins que ces balises soient présentes).

$(document).ready(function() {
// les instructions à executer quant le DOM est prêt.
alert("document is ready");
});

Le « window load » de Jquery

Cette fonction moins utilisé et moins connu sert à éxécuter des instructions lorsque tous les objets de la page ont fini de charger. Concrètement qu’est ce ça veut dire ? Jquery va attendre que tous les scripts / images / objets flash / Video … soit charger dans la page pour exécuter les instructions présentes dans cette fonction.

Utiliser cette fonction peut-être interessant dans certains cas précis. Je vais donner un exemple sur lequel j’ai travaillé et qui m’a d’ailleurs permis de connaître l’existence de cette fonction « window load ».

L’exemple avec window load

J’ai eu à faire un système d’aide pour une application que je développe à ma job. Ce système d’aide est composé de vignette qui présente chaque fonctionnalité du dashboard. Pour afficher la première vignette, il me fallait attendre que tous les éléments soient chargés. Cette fonction à donc fait le travail à merveille.

$(window).load(function() {
// les instructions à executer quand les frames, objects and images ... sont chargés.
alert("window is loaded");
});

Conclusion

La différence entre ces 2 fonctions est donc une question de timing mais la finalité est la même : charger les instructions à éxécuter au chargement de la page. Je connais depuis peu window load et je dois dire qu’elle m,a été utile uniquement pour un projet et que je dirais qu’elle est à utiliser avec prudence.

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.