Le 20 octobre 2010

1. Analyse du travail d'Alessandro Sordoni

Comme expliqué dans le cadre du projet d'Alessandro, il a implémenté une application serveur (écrite en PHP) récupérant les données générées par Environnement Canada sous forme XML pour les analyser syntaxiquement et en faire des fichiers exploitables par son interface web.

Les données météo analysées sont stockées sous forme de fichier XML, stockés dans un dossier nommé "cache" et se décomposant en 2 fichiers :

  • Le premier contenant les prévisions sur 3 jours (le jour courant ainsi que le lendemain et sur lendemain)
  • Le second stockant les prévisions du reste de la semaine
Afin de récupérer les données météo, notre future interface graphique consultera ces fichiers.

2. Plugin pour la création des graphiques
2.1. Présentation des plugins

Voici la liste des différents plugins qui ont retenu notre attention:

  • Highcharts, plugin jQuery sous Licence "Creative Commons Attribution" et "Non-Commercial 3.0 License".
    Celui ci permet la création de graphiques sous toutes les formes, mais on regrettera sa licence quelque peut fermée dans l'éventuelle intégration de notre interface graphique à un site web professionnel.
    Fonctionne sur tous les navigateurs (IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 et 4, Opera 9 et Google Chrome).
  • Flot, plugin jQuery malheureusement moins interactif que Highcharts mais offrant un large éventail de représentations graphiques (dues aux contributions de développeurs de plugins).
    De plus, flot est intéressant car il est sous licence MIT.
    Fonctionne sur tous les navigateurs (IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 et 4, Opera 9 et Google Chrome).
  • jqPlot est aussi un plugin jQuery de création de graphiques. Celui ci possède un grand nombre de plugins nous permettant de personnaliser à souhait notre graphique mais aussi l'interaction avec l'utilisateur.
    Celui ci est sous licence MIT et GPL version 2.
    Fonctionne sur tous les navigateurs (IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 et 4, Opera 9 et Google Chrome).
  • Protovis est un framework Javascript, développé par le Standford visualization group, axé sur la création de graphiques via SVG, encore très mal supporté par les navigateur de type "Internet Explorer".
    Si notre analyse le demande et que seul protovis le propose, nous pourrions être amené à implémenter certains graphiques avec cette librairie, mais ne fonctionnant que sur les navigateurs récents, nous explorerons d'abord les solutions alternatives.
2.2. Choix du plugin

Etant à la recherche d'une librairie de création graphique fonctionnant sur tous les navigateurs, proposant de nombreuses représentations ainsi qu'une interactivité poussée avec l'utilisateur, nous nous tournerons vers la librairie jqPlot nous ayant convaincu de part sa documentation et ses fonctionnalités natives :

  • Gestion de plusieurs axes
  • Configuration quasi infinie de l'interface graphique (couleurs, police de caractères, type du graphique...)
  • Interaction avec l'utilisateur avec des "remote control" permettant par exemple de gérer la plage de données à afficher sur le graphique)
  • Ajout de légendes
  • Faire du suivi de données (position de la souris)

3. Découverte de jqPlot
3.1. Elements nécessaires a jqPlot

jqPlot nécessite le framework jQuery (version 1.3.2 ou plus récente). Pour utiliser jqPlot dans un document HTML, nous devons inclure jQuery, jQuery plugin jqPlot, le fichier CSS de jqPlot ainsi que le script excanvas pour assurer le support des navigateurs "Internet Explorer".

3.2. Manipulation de jqPlot

Afin de prendre en main le plugin, nous avons développé une interface reprenant quelques fonctionnalités de jqPlot, notamment la personnalisation de l'affichage (couleur + police), le vignettage sur les points caractéristiques de la courbe ainsi que la sélection d'une plage de données via un graphique "remote control".
Les données météo ont étés générées par un script PHP basique qui augmente la température de 1 degré chaque heures du jour et la réinitialise le jour suivant.

Pour créer le graphique jqPlot, nous devons appeler le plugin de la facon suivante

  • chart est la variable contenant l'objet jqplot créé.
  • chart_div est l'id de l'élément HTML qui contiendra le graphique
  • dataSeries étant un tableau contenant des tableaux représentant chacun une série de données qui elles même contiennent des tableaux de deux éléments contenant les valeur X,Y.
  • optionsObj étant un objet contenant des couples attributs:valeurs qui peuvent être de tout types.
    Voici un exemple tiré de la documentation de jqPlot.

3.3. Plugins utilisés

  • DateAxisRenderer à été utilisé pour formater la date.
  • Highlighter : nous à permis d'afficher une vignette au survol des données caractéristiques de la courbe.
  • CanvasAxisTickRenderer et canvasTextRenderer nous permettent de définir des styles pour le texte affiché sur les axes (ici nous avons incliné les textes et changé la police ainsi que la taille des caractères).
  • Cursor définit le style du curseur ainsi que le fonctionnement du graphique de sélection de la plage de date désirée.

3.4. Rendu
3.5. Code produit

Ci dessous, le code Javascript produit pour réaliser l'interface graphique présenté ci dessus.