Archive

Posts Tagged ‘Graphique’

Flot, le retour de la vengeance

January 12th, 2009 No comments

Fin 2008, je vous parlais de ma découverte du moment : flot.
Je l’ai depuis décliné à toutes les sauces, ou presque, je vous propose donc un exemple de ma composition:
– Les statistiques de traduction du site de Debian (url qui peut prendre des paramètres comme ici).
C’est vraiment bien, et tout ceci sans code dynamique coté serveur 🙂
Voila donc un petit billet pour vous montrer ce que permet de faire flot avec un peu de JavaScript en plus a coté pour avoir des interactions avec le graph.
Notez également que Google propose une API qui permet de faire toute sorte de graphiques (regardez ici) mais qui reste des images fixe.

Categories: Web Tags: ,

Flot – Graphique en JavaScript

December 22nd, 2008 3 comments

Il y a cinq ans de cela, je cherchais une application pour “faire mes comptes”.
A l’époque il n’existait que peu d’application pour faire cela et aucune ne me convenait. D’ailleurs, aujourd’hui, il en existe des tonnes, et aucune ne me convient. Peu d’application permettent de faire des choses assez simple comme des projections d’intérêt sur des comptes épargnes (ou alors que sur des périodes journalière ou que bimensuel) ou plus généralement de la gestion prévisionnel 

Résultat: J’utilisais excel (si si) qui comporte un bon nombre de fonction financière et qui peut donc faire à peu près tout ce qu’on peut imaginer à condition d’être patient.
Mais excel c’est pas libre et pas très sexy, j’ai donc écrit en 2003 une application web pour mon propre besoin (et qui à quelques autres utilisateurs, mais les gens sont retissant à gérer leurs comptes sur un site web) qui à depuis subit de lourdes modifications :

  • AJAX (Asynchronous Javascript And XML) pour charger les listes d’opérations dynamiquement, renvoie d’un fichier XML puis construction des tags html en JavaScript,
  • Passage de fichier à plat vers une base de données (avec abstraction Object de la BDD),
  • XSLT (eXtensible Stylesheet Language Transformation) coté client, pour construire cette liste d’opérations en (X)HTML sans 2 tonnes de JavaScript,
    (le XSLT coté client, via XSLTProcessor, ne fonctionnait à l’époque (et sûrement encore maintenant) que sous FireFox. Des librairies JavaScript existent pour les autres navigateurs)
  • Graphique pour voir l’évolution des comptes,
  • … peut être HTML5 un jour, cela permettra de garder les informations sur le poste de l’utilisateur qui n’aura peut-être plus peur d’utiliser un site web tier pour ses comptes !

Ceux qui me connaisse savent que je ne suis pas très fan des divers framework que l’on peut trouver pour développer des sites web.
Cette application est donc complètement faite à la main (en Perl), faire un site web en Perl n’est pas très compliqué mais le jour ou j’ai voulu faire un graphique j’ai compris ma douleur.
En effet, je n’ai pas trouvé, à l’époque, de module Perl permettant, sur un même graphique, de représenter plusieurs séries de données temporel utilisant chacune des repères temporels différents.
J’ai donc écrit mon propre code de génération de Graph (en utilisant GD). Exercice un peu complexe, la gestion de l’axe temporel n’étant pas des plus simple. J’ai cependant obtenu ce que je voulais moyennant 400 lignes de Perl.
Le résultat fonctionne bien et est plutôt visuellement agréable, mais donne une image fixe qui n’est pas super sexy.

J’étais plutôt satisfait de mon graphique, jusqu’à ma découverte, il y a un moment déjà, de Google Finance qui fait (en flash) des beaux graphiques sur lesquels on peut zoomer facilement.
Mon système avait en effet 2 défauts, pour zoomer, il fallait sélectionner une date de début et/ou de fin “à la main” puis attendre la régénération d’une nouvelle image ; et image fixe oblige il était impossible de connaître la valeur précise d’un point du graphe en se positionnant dessus.

Comme il n’y a que les imbéciles qui ne changent pas d’avis, je m’ouvre de plus en plus au framework. Il faut dire que ces derniers commencent à être matures et reconnus. Après avoir découvert Prado, un framework pour faire du PHP, en début d’année, j’ai découvert hier Flot, une librairie JavaScript basé sur JQuery et qui permet de faire des graphiques fabuleux !
Et cela n’a vraiment rien à envier au beaux graphiques de Google Finance.

Je vous invite donc à visiter le site de Flot et découvrir par les exemples ce qu’il est possible de faire.
Ces derniers ne montrent pas toutes les possibilités de flot mais vous pouvez voir que :

  • Il est possible de tracer des fonctions mathématique ou des séries discontinues ici
  • Qu’il est possible de tracer des lignes, des points, des points sur des lignes, des bars, etc. ici
  • Que, oui, vraiment, le développeur aime la trigo ici
  • Que l’on peut choisir quelles séries afficher avec des checkbox et que l’on peut placer une légende (on peut choisir sa position, sa couleur, son opacité, …) ici
  • Que l’on peut zoomer comme on veut ici
  • Que l’on peut se rapprocher de ce que fait Google ici (notez la précision de l’axe temporel qui change quand vous zoomez)
  • Que l’on peut très bien avoir 2 séries dans des unités différentes ici
  • Que l’on peut afficher les valeurs en passant dessus ici (cochez la case enable tooltip)

Je n’ai pas trouvé de chose que l’on ne peut pas customiser (couleurs, précision des axes, …), si vous n’êtes pas convaincu allez consulter la doc de l’API qui est très bien faites.

J’ai vraiment été très agréablement surpris par cette librairie qui est plutôt rapide et donc la prise en main est très rapide, regardez le source des exemples cela reste toujours simple.
 Du coup je vais sûrement me plonger dans JQuery, qui n’as pas l’air mal du tout 🙂

Categories: Web Tags: , , ,