<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Quoi de 9 ? &#187; Flot</title>
	<atom:link href="http://blog.jeb.be/tag/flot/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.jeb.be</link>
	<description>blog.jeb.be</description>
	<lastBuildDate>Tue, 22 Jun 2010 19:31:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Flot, le retour de la vengeance</title>
		<link>http://blog.jeb.be/2009/01/12/flot-le-retour-de-la-vengeance/</link>
		<comments>http://blog.jeb.be/2009/01/12/flot-le-retour-de-la-vengeance/#comments</comments>
		<pubDate>Sun, 11 Jan 2009 23:12:40 +0000</pubDate>
		<dc:creator>Jeb</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Flot]]></category>
		<category><![CDATA[Graphique]]></category>

		<guid isPermaLink="false">http://blog.jeb.be/?p=328</guid>
		<description><![CDATA[Fin 2008, je vous parlais de ma découverte du moment : flot. Je l&#8217;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&#8217;est vraiment bien, et tout ceci sans [...]]]></description>
			<content:encoded><![CDATA[<p>Fin 2008, je vous <a href="/2008/12/22/flot-graphique-en-javascript/">parlais</a> de ma découverte du moment : <a href="http://code.google.com/p/flot/" onclick="pageTracker._trackPageview('/outgoing/code.google.com/p/flot/?referer=');">flot</a>.<br />
Je l&#8217;ai depuis décliné à toutes les sauces, ou presque, je vous propose donc un exemple de ma composition:<br />
- Les <a href="http://debian.jeb.be/wml_trans_stats.html" onclick="pageTracker._trackPageview('/outgoing/debian.jeb.be/wml_trans_stats.html?referer=');">statistiques de traduction</a> du site de <a href="http://www.debian.org" onclick="pageTracker._trackPageview('/outgoing/www.debian.org?referer=');">Debian</a> (url qui peut prendre des paramètres comme <a href="http://debian.jeb.be/wml_trans_stats.html?lang=fr&#038;checked=Untranslated&#038;start=1230000000000" onclick="pageTracker._trackPageview('/outgoing/debian.jeb.be/wml_trans_stats.html?lang=fr_038_checked=Untranslated_038_start=1230000000000&amp;referer=');">ici</a>).<br />
C&#8217;est vraiment bien, et tout ceci sans code dynamique coté serveur <img src='http://blog.jeb.be/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
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.<br />
Notez également que Google propose une API qui permet de faire toute sorte de <a href="http://code.google.com/apis/chart/" onclick="pageTracker._trackPageview('/outgoing/code.google.com/apis/chart/?referer=');">graphiques</a> (regardez <a href="http://code.google.com/apis/chart/types.html" onclick="pageTracker._trackPageview('/outgoing/code.google.com/apis/chart/types.html?referer=');">ici</a>) mais qui reste des images fixe.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.jeb.be/2009/01/12/flot-le-retour-de-la-vengeance/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flot &#8211; Graphique en JavaScript</title>
		<link>http://blog.jeb.be/2008/12/22/flot-graphique-en-javascript/</link>
		<comments>http://blog.jeb.be/2008/12/22/flot-graphique-en-javascript/#comments</comments>
		<pubDate>Mon, 22 Dec 2008 03:48:18 +0000</pubDate>
		<dc:creator>Jeb</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Flot]]></category>
		<category><![CDATA[Graphique]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://blog.jeb.be/?p=311</guid>
		<description><![CDATA[Il y a cinq ans de cela, je cherchais une application pour&#160;&#8221;faire mes comptes&#8221;. A l&#8217;époque il n&#8217;existait que peu d&#8217;application pour faire cela et aucune ne me convenait. D&#8217;ailleurs, aujourd&#8217;hui, il en existe des tonnes, et aucune ne me convient. Peu d&#8217;application permettent de faire des choses assez simple comme des projections&#160;d&#8217;intérêt sur des [...]]]></description>
			<content:encoded><![CDATA[<p>Il y a cinq ans de cela, je cherchais une application pour&nbsp;&#8221;faire mes comptes&#8221;.<br />
A l&#8217;époque il n&#8217;existait que peu d&#8217;application pour faire cela et aucune ne me convenait. D&#8217;ailleurs, aujourd&#8217;hui, il en existe des tonnes, et aucune ne me convient. Peu d&#8217;application permettent de faire des choses assez simple comme des projections&nbsp;d&#8217;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&nbsp;</p>
<p>Résultat: J&#8217;utilisais excel (si si) qui comporte un bon nombre de fonction financière et qui peut donc faire à peu près tout ce qu&#8217;on peut imaginer à condition d&#8217;être patient.<br />
Mais excel c&#8217;est pas libre et pas très sexy, j&#8217;ai donc écrit en 2003 une application web pour mon propre besoin (et qui à quelques autres utilisateurs, mais les gens sont&nbsp;retissant&nbsp;à&nbsp;gérer&nbsp;leurs comptes sur un site web) qui à depuis subit de lourdes modifications :</p>
<ul>
<li><acronym class="uttAcronym" title="Asynchronous Javascript And XML">AJAX</acronym> (Asynchronous Javascript And <a href="http://www.w3.org/XML/" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.w3.org/XML/?referer=');"><acronym class="uttInitialism" title="eXtensible Markup Language">XML</acronym></a>) pour charger les listes d&#8217;opérations dynamiquement, renvoie d&#8217;un fichier <a href="http://www.w3.org/XML/" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.w3.org/XML/?referer=');"><acronym class="uttInitialism" title="eXtensible Markup Language">XML</acronym></a> puis construction des tags html en&nbsp;JavaScript,</li>
<li>Passage de fichier à plat vers une base de données (avec abstraction Object de la BDD),</li>
<li><a href="http://www.w3.org/Style/XSL/" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.w3.org/Style/XSL/?referer=');"><acronym class="uttInitialism" title="eXtensible Stylesheet Language Transformation">XSLT</acronym></a> (eXtensible Stylesheet Language Transformation) coté client, pour construire cette liste d&#8217;opérations en (X)<a href="http://www.w3.org/MarkUp/" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.w3.org/MarkUp/?referer=');"><acronym class="uttInitialism" title="HyperText Markup Language">HTML</acronym></a> sans 2 tonnes de JavaScript,<br />
(le <a href="http://www.w3.org/Style/XSL/" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.w3.org/Style/XSL/?referer=');"><acronym class="uttInitialism" title="eXtensible Stylesheet Language Transformation">XSLT</acronym></a> coté client, via&nbsp;XSLTProcessor, ne fonctionnait à l&#8217;époque (et&nbsp;sûrement&nbsp;encore maintenant) que sous FireFox. Des librairies JavaScript <a href="http://code.google.com/p/ajaxslt/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/code.google.com/p/ajaxslt/?referer=');">existent</a> pour les autres navigateurs)</li>
<li>Graphique pour voir l&#8217;évolution des comptes,</li>
<li>&#8230; peut être HTML5 un jour, cela permettra de garder les informations sur le poste de l&#8217;utilisateur qui n&#8217;aura peut-être plus peur d&#8217;utiliser un site web tier pour ses comptes !</li>
</ul>
<p>Ceux qui me connaisse savent que je ne suis pas très fan des divers framework que l&#8217;on peut trouver pour développer des sites web.<br />
Cette application est donc&nbsp;complètement&nbsp;faite à la main (en Perl), faire un site web en Perl n&#8217;est pas très compliqué mais le jour ou j&#8217;ai voulu faire un graphique j&#8217;ai compris ma douleur.<br />
En effet, je n&#8217;ai pas trouvé, à l&#8217;époque, de module Perl permettant, sur un même graphique, de représenter plusieurs séries de données temporel utilisant&nbsp;chacune&nbsp;des&nbsp;repères temporels&nbsp;différents.<br />
J&#8217;ai donc écrit mon propre code de génération de Graph (en utilisant GD). Exercice un peu complexe, la gestion de l&#8217;axe temporel n&#8217;étant pas des plus simple. J&#8217;ai cependant obtenu ce que je voulais moyennant 400 lignes de Perl.<br />
Le résultat fonctionne bien et est plutôt visuellement agréable, mais donne une image fixe qui n&#8217;est pas super sexy.</p>
<p>J&#8217;étais plutôt satisfait de mon graphique,&nbsp;jusqu&#8217;à&nbsp;ma découverte, il y a un moment déjà, de <a href="http://finance.google.com/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/finance.google.com/?referer=');">Google Finance</a> qui fait (en flash) des <a href="http://finance.google.com/finance?q=INDEXNASDAQ:.IXIC" target="_blank" onclick="pageTracker._trackPageview('/outgoing/finance.google.com/finance?q=INDEXNASDAQ_.IXIC&amp;referer=');">beaux graphiques</a> sur lesquels on peut zoomer facilement.<br />
Mon système avait en effet 2 défauts, pour zoomer, il fallait&nbsp;sélectionner&nbsp;une date de début et/ou de fin &#8220;à la main&#8221; puis attendre la&nbsp;régénération&nbsp;d&#8217;une nouvelle image ; et image fixe oblige il était impossible de&nbsp;connaître&nbsp;la valeur précise d&#8217;un point du graphe en se&nbsp;positionnant dessus.</p>
<p>Comme il n&#8217;y a que les&nbsp;imbéciles&nbsp;qui ne changent pas d&#8217;avis, je m&#8217;ouvre de plus en plus au framework. Il faut dire que ces derniers commencent à être matures et reconnus. Après avoir découvert <a href="http://www.pradosoft.com/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.pradosoft.com/?referer=');">Prado</a>, un framework pour faire du <a href="http://www.php.net" class="ubernym uttInitialism" onclick="pageTracker._trackPageview('/outgoing/www.php.net?referer=');"><acronym class="uttInitialism" title="PHP: Hypertext Preprocessor">PHP</acronym></a>, en début d&#8217;année, j&#8217;ai découvert hier <a href="http://code.google.com/p/flot/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/code.google.com/p/flot/?referer=');">Flot</a>, une librairie JavaScript basé sur <a href="http://jquery.com/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/jquery.com/?referer=');">JQuery</a> et qui permet de faire des graphiques fabuleux !<br />
Et cela n&#8217;a vraiment rien à envier au beaux graphiques de&nbsp;<a href="http://finance.google.com/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/finance.google.com/?referer=');">Google Finance</a>.</p>
<p>Je vous invite donc à visiter le site de&nbsp;<a href="http://code.google.com/p/flot/" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/code.google.com/p/flot/?referer=');">Flot</a>&nbsp;et découvrir par <a href="http://people.iola.dk/olau/flot/examples/" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/?referer=');">les exemples</a> ce qu&#8217;il est possible de faire.<br />
Ces derniers ne montrent pas toutes les&nbsp;possibilités&nbsp;de flot mais vous pouvez voir que :</p>
<ul>
<li>Il est possible de tracer des fonctions mathématique ou des séries discontinues <a href="http://people.iola.dk/olau/flot/examples/basic.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/basic.html?referer=');">ici</a></li>
<li>Qu&#8217;il est possible de tracer des lignes, des points, des points sur des lignes, des bars, etc.&nbsp;<a href="http://people.iola.dk/olau/flot/examples/graph-types.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/graph-types.html?referer=');">ici</a></li>
<li>Que, oui, vraiment, le&nbsp;développeur&nbsp;aime la trigo <a href="http://people.iola.dk/olau/flot/examples/setting-options.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/setting-options.html?referer=');">ici</a></li>
<li>Que l&#8217;on peut choisir quelles séries afficher avec des checkbox et que l&#8217;on peut placer une légende (on peut choisir sa position, sa couleur, son opacité, &#8230;) <a href="http://people.iola.dk/olau/flot/examples/turning-series.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/turning-series.html?referer=');">ici</a></li>
<li>Que l&#8217;on peut zoomer comme on veut <a href="http://people.iola.dk/olau/flot/examples/zooming.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/zooming.html?referer=');">ici</a></li>
<li>Que l&#8217;on peut se rapprocher de ce que fait Google <a href="http://people.iola.dk/olau/flot/examples/visitors.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/visitors.html?referer=');">ici</a>&nbsp;(notez la précision de l&#8217;axe temporel qui change quand vous zoomez)</li>
<li>Que l&#8217;on peut très bien avoir 2 séries dans des unités différentes <a href="http://people.iola.dk/olau/flot/examples/dual-axis.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/dual-axis.html?referer=');">ici</a></li>
<li>Que l&#8217;on peut afficher les valeurs en passant dessus <a href="http://people.iola.dk/olau/flot/examples/interacting.html" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/people.iola.dk/olau/flot/examples/interacting.html?referer=');">ici</a> (cochez la case enable tooltip)</li>
</ul>
<p>Je n&#8217;ai pas trouvé de chose que l&#8217;on ne peut pas customiser (couleurs,&nbsp;précision&nbsp;des axes, &#8230;), si vous n&#8217;êtes pas convaincu allez consulter la <a href="http://flot.googlecode.com/svn/trunk/API.txt" class="ext-link" target="_blank" onclick="pageTracker._trackPageview('/outgoing/flot.googlecode.com/svn/trunk/API.txt?referer=');">doc de l&#8217;API</a>&nbsp;qui est très bien faites.</p>
<p>J&#8217;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.<br />
&nbsp;Du coup je vais&nbsp;sûrement&nbsp;me plonger dans JQuery, qui n&#8217;as pas l&#8217;air mal du tout <img src='http://blog.jeb.be/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>]]></content:encoded>
			<wfw:commentRss>http://blog.jeb.be/2008/12/22/flot-graphique-en-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
