samedi 10 avril 2010

Créer des graphiques de statistiques gratuitement

Publié par Infinite Loop, à 10 h 05 1 commentaire

On le sait, les dirigeants d'entreprises aiment les chiffres, surtout quand ils sont disposés en diagrammes. Quand mon patron m'a demandé d'incorporer des graphiques de statistiques (communément appelés "charts") à une application web, j'ai fait des recherches pour trouver quelque chose d'intéressant à l'oeil et malléable pour qu'un intégrateur ou un programmeur puisse effectuer son travail rapidement tout en ayant des résultats satisfaisants. Tout ça pour parler le même langage que mon patron.

C'est comme ça que j'ai découvert l'existence de FusionCharts, un produit indien très riche en possibilités. La license complète de FusionCharts v3 se détaille à 500$ mais pour commencer, on peut se contenter d'utiliser FusionCharts Free version 2.2, plus limitée mais suffisante pour mes besoins. Elle compte 22 types de graphiques animés en Flash, dont plusieurs caractéristiques sont personnalisables. Il y a même la possibilité de faire des diagrammes de Gantt (approved by my boss!). Voyez les différences entre les versions gratuite et payante pour choisir celle qui vous convient le mieux.

Lorsque vous aurez téléchargé le zip, décompressez-le et ouvrez Index.html pour obtenir de la documentation et des exemples. Pour vous faire une démonstration plus concrète, je vais tenter de reproduire mes statistiques de visites (fournies par Statcounter.com) pour que vous puissiez voir le résultat.

Statcounter

La première chose à faire pour générer un graphique, c'est d'avoir une source de données à notre disposition. J'ai généré un fichier XML statique qui respecte les spécifications de FusionCharts. Il aurait aussi pu provenir d'une page dynamique qui génère à la volée les données XML.

data.xml

<graph caption='Code 18 - Monthly statistics' subcaption='April 2009 - March 2010' divlinecolor='DDDDDD' numdivlines='7' showAreaBorder='1' areaBorderColor='000000' showNames='1' formatNumberScale='2' rotateNames='1'  decimalPrecision='0'>

<categories>
<category name='April' />
<category name='May' />
<category name='June' />
<category name='July' />
<category name='August' />
<category name='September' />
<category name='October' />
<category name='November' />
<category name='December' />
<category name='January' />
<category name='February' />
<category name='March' />
</categories>

<dataset seriesname='Page loads' color='7DC622' showValues='1'>
<set value='2116' />
<set value='2464' />
<set value='3426' />
<set value='4830' />
<set value='4920' />
<set value='7269' />
<set value='7673' />
<set value='8078' />
<set value='8340' />
<set value='9746' />
<set value='9234' />
<set value='11565' />
</dataset>

<dataset seriesname='Unique visitors' color='0069B3' showValues='1'>
<set value='1740' />
<set value='2001' />
<set value='2650' />
<set value='3940' />
<set value='3820' />
<set value='5643' />
<set value='6075' />
<set value='6477' />
<set value='6589' />
<set value='7638' />
<set value='7455' />
<set value='9298' />
</dataset>

<dataset seriesname='Returning visitors' color='EE9C00' showValues='1'>
<set value='161' />
<set value='257' />
<set value='327' />
<set value='511' />
<set value='480' />
<set value='681' />
<set value='762' />
<set value='764' />
<set value='808' />
<set value='876' />
<set value='944' />
<set value='1399' />
</dataset>

</graph>

Le fichier est séparé comme suit :

Les catégories correspondent aux noms sur l'axe des x (les mois)
Chaque bloc dataset correspond à une ligne de données

On crée un conteneur qui accueillera le graphique dans le DOM HTML :

<div id="graphHolder"></div>

On charge la librairie JavaScript de FusionCharts et optionnellement le framework jQuery pour initialiser le graphique au chargement de la page :

<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/FusionChartsFree/JSClass/FusionCharts.js"></script>

On charge le graphique en indiquant son type et l'emplacement des données :

$(document).ready( initFusionCharts );

function initFusionCharts(){
   var chart = new FusionCharts("../Charts/FCF_MSColumn2D.swf", "ChartId", "600", "400");
   //var chart = new FusionCharts("../Charts/FCF_MSColumn3D.swf", "ChartId", "600", "400");
   //var chart = new FusionCharts("../Charts/FCF_MSArea2D.swf",  "ChartId", "600", "400");

   chart.setDataURL("data.xml");
   chart.render("graphHolder");
}

Le graphique peut ne pas être chargé en JavaScript, mais c'est plus simple et plus lisible que de l'écrire au long avec la balise <object>.

Voici le résultat :

Colonnes en 2 dimensions (FCF_MSColumn2D.swf)

Utilisez les autres définitions que j'ai placé en commentaires pour voir deux autres styles générés à l'aide de la même source de données.

Colonnes en 3 dimensions (FCF_MSColumn3D.swf)