Tests du plugin de génération de rapports Highcharts

Le contexte

L’inclusion de rapports dans un site web peut avoir du sens, notamment sur les sites qui gèrent de grandes quantités de données  et qui souhaitent présenter des statistiques à l’utilisateur.

La création d’un rapport graphiquement et ergonomiquement attractif peut s’avérer très laborieuse pour un développeur web qui n’est pas expérimenté avec le HTML / JavaScript.

Les critères de sélection

Pour répondre à ces besoins de restitution, l’utilisation d’un plugin capable de créer un rapport peut paraître une bonne solution si ce plugin a, a minima, les caractéristiques suivantes :

• Facilité d’ajout au projet : librairie indépendante ;
• Peu ou aucune configuration nécessaire : indépendant du type de machine, du système d’exploitation, etc. ;
• Facilité de mise en place ;
• Efficacité : que son utilisation n’impacte pas de manière notable le rendement et les performances du site ;
• Pérennité et évolutivité : existence de documentations et d’une large communauté d’utilisateurs.

Idéalement, d’autres points sont à prendre en compte :

• Polyvalence : capacité de produire plusieurs types de rapports. Entre un plugin capable de créer un rapport de type camembert et un autre capable de créer tout type de rapport, on choisira la deuxième option ;
• Open-source ou peu onéreux

Highcharts, l’option choisie

Pour mener à bien notre projet de création de beaux rapports, nous avons choisi de tester Highcharts. Highcharts est un plugin sorti en 2009, fait en pur JavaScript et qui a été développé par Highsoft Solutions AS, une entreprise norvégienne  basée à Vik i Sogn, Norvège.

Ce choix correspond aux besoins décrits précédemment :

• Facilité d’ajout au projet : il faut seulement placer le fichier JavaScript dans un dossier accessible par notre projet. On dispose de l’option classique entre importer le fichier formaté pour pouvoir débugger le code (highcharts.src.js) ou la version compressée pour un meilleur rendement (highcharts.js) ;
• Peu ou aucune configuration nécessaire : comme Highcharts est un plugin 100% JavaScript, nul besoin de le configurer. La seule condition est d’utiliser jQuery, MooTools ou Prototype, ce qui devrait couvrir la majorité des projets web modernes ;
• Facilité de mise en place : il suffit d’inclure le JS dans la page qui va l’utiliser ou dans un modèle plus général si nous devons créer plusieurs rapports.

<script src="js/highcharts.js"></script>

Aucune configuration ne sera nécessaire pour commencer à l’utiliser

• Efficacité : les tests montrent de bons résultats pour des rapports avec plus de 1000 points ;
• Pérennité et évolutivité : la forte utilisation de ce plugin fait que la communauté est à présent importante. S’il existait avant un forum officiel, les questions sont aujourd’hui posées sur Stackoverflow (http://stackoverflow.com). En revanche, pour la partie documentation, même si l’accès à l’API est très simple et bien expliqué, tout est en anglais ;
• Polyvalence : Highcharts peut créer des rapports de type ligne, area, histogramme, camembert, rose de vents, etc. De plus, plusieurs types différents peuvent être combinés dans  un même rapport ; on peut aussi créer des rapports d’actualisation automatique et même créer un rapport en temps réel en cliquant directement sur celui-ci ;
• Open-source ou peu onéreux : pour une utilisation personnelle, ce plugin est gratuit. Pour une utilisation commerciale, les licences commencent à partir de 80 $.

Installation et premier test

Une fois le plugin téléchargé et l’import intégré au modèle, il n’y a qu’à copier un des exemples disponibles sur le site de Highcharts pour commencer à comprendre comment les rapports sont créés.

Ce test ne devrait poser aucun problème aux utilisateurs d’IE8+ ou n’importe quel navigateur actuel. Pour IE7, nous expliquerons les problèmes rencontrés à la fin de cet article.

Deuxième test : appel Ajax et pop-up

Une fois le premier test compris, l’étape suivante consiste à créer un rapport avec de vraies données issues de notre base. De plus, nous souhaitons ajouter l’apparition d’un petit pop-up lorsque l’utilisateur clique sur un des points de la série, offrant la possibilité de lui montrer plus de précisions sur ce point.

L’appel Ajax

Pour l’appel Ajax, nous avons pris comme référence un exemple de page de Highcharts qui crée un rapport à partir d’un fichier texte. Nous avons donc substitué la lecture du fichier par un appel Ajax de type JSON et découpé les données reçues.

Cet exemple montre le nombre d’appels effectués par date. Pour cela, nous avons groupé les appels par jour sans tenir compte de l’heure.

Côté serveur, le type choisi pour envoyer les données est un Map, car nous avons besoin d’envoyer des paires [date, nombre d’appels]. Mais une fois l’exemple codé, le résultat n’est pas vraiment pertinent :

Après une rapide analyse, le problème venait du type de Map choisi. Nous avions choisi un HashMap pour enregistrer les données, mais comme un HashMap ne garde pas d’ordre, les données étaient traitées dans un ordre aléatoire. Comme Highcharts permet la création de rapports avec les axes inversés, cela ne posait aucun problème au plugin.

La solution était donc d’utiliser un Map ordonné. Pour cela, nous avons utilisé un arbre en Java (TreeMap), qui utilise l’ordre naturel des clés. Comme notre objet clé était une date, cette fois les données étaient donc envoyées dans le bon ordre :

Le pop-up

Pour le pop-up, nous avons encore une fois pris l’exemple du fichier, car il affiche aussi le pop-up souhaité. Pour le mettre en place, il suffit d’ajouter un handler pour le clic sur les points de la série. Ce code est mis dans la partie plotOptions du rapport :

plotOptions: {
  series : {
    cursor : 'pointer',
    point : {
      events : {
        click : function() {
          hs.htmlExpand(null, {
            pageOrigin : {
              x: this.pageX,
              y: this.pageY
            },
            headingText : Highcharts.dateFormat('%A, %e %B, %Y', this.x),
            maincontentText : this.y +' appels effectués ',
            width : 300
          });
        }
      }
    },
    marker: {
      lineWidth: 1
    }
  }
}

Un appel à une variable hs est effectué. Cet objet est une instance de la classe HighSlide, un plugin créé aussi par HighSoft Solutions. HighSlide est utilisé notamment pour l’affichage d’images, et sa méthode htmlExpand augmente une image lorsque l’on clique dessus. Mais, en plus de cette fonctionnalité, htmlExpand permet aussi l’affichage de code HTML si son premier paramètre est null.

Pour mettre en place ce plugin, il suffit d’importer le fichier highslide.js, son CSS et les images associées. Une fois tout importé dans notre projet, le pop-up s’affiche :

Il est à noter que ce plugin est également payant pour une utilisation commerciale (29$ à ce jour).

Troisième test : export et multilinguisme

Pour terminer, nous voulions ajouter une option d’export des rapports affichés et d’affichage multilingue.

L’export

L’impression et l’export des rapports sont faits par l’intermédiaire d’un autre fichier JavaScript appartenant à Highcharts : exporting.js. Une fois le fichier importé au projet, les icônes d’impression et d’export apparaîtront directement en haut à droite des rapports :

Les fichiers d’export possibles sont PNG, JPEG, PDF et vecteur SVG.

Multilinguisme

Pour gérer le multilinguisme, Highsoft a choisi l’option de laisser au développeur la possibilité d’éditer directement les textes qui apparaissent dans un rapport.

Pour modifier les dates, il suffira d’appeler la méthode setOptions de l’objet global Highcharts et de redéfinir les options souhaitées. La liste complète peut se trouver dans l’API de Highcharts :

Highcharts.setOptions({
  lang: {

    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],

    shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],

    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']

  }
});

Pour que ces options soient prises en compte, ce code doit être exécuté avant la création du rapport. Voici le résultat final :

Principales difficultés rencontrées

Compatibilité avec IE7

Même si Highcharts est apparemment compatible avec IE6+, nous n’avons pas réussi à le faire marcher sur IE7. L’erreur JavaScript SCRIPT16389: Fail s’affiche toujours. Les solutions suivantes ont été testées sans succès :

• Mettre à jour le code jQuery en substituant la fonction live() par on()
• Vérification de tous les appels à la fonction setTimeout() avec une fonction déclarée comme paramètre (setTimeout(function(){..}) au lieu de setTimeout({..}))
• Vérification des virgules en trop dans le code jQuery, car non supporté par IE7. Par exemple :

$(function() {
	var options = {
            chart: {
                renderTo: 'container'
            }, // virgule à supprimer
}
)} ;

Notre besoin ne se situant pas dans une compatibilité IE7, nous n’avons pas poussé plus loin l’analyse.

Affichage des pop-ups

Le plugin HighSlide génère une table pour créer le pop-up. Notre projet ayant déjà certains styles CSS pour les tables, cela rendait l’affichage du pop-up incorrect :

Il faudra donc veiller à surcharger les styles CSS par des styles dédiés aux rapports dans les balises .highslide-xxx.

Mon avis

J’encourage fortement l’utilisation de ce plugin. L’énorme liste de types de rapport supportés fait de Highcharts un des plugins les plus enthousiasmants actuellement disponibles.

Sa facilité de mise en place ainsi que la qualité visuelle des rapports générés permettent de l’utiliser pour des applications aussi bien personnelles que professionnelles.

Finalement, le fait que Highcharts soit un plugin JavaScript, le langage de script web côté client le plus répandu, aide à sa prolifération parmi toutes les différentes communautés de développeurs.