skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

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)



Surface en 2 dimensions (FCF_MSArea2D.swf)


Tags: Intégration, JavaScript

1 réponse à "Créer des graphiques de statistiques gratuitement"

  1. Anonyme a dit...
    16 mai 2013 à 22 h 51

    merci bien ça ma bien aider


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ▼  avril 2010 (37)
        • Mise à jour Ubuntu 10.04 LTS
        • Calculer le temps d'exécution d'un script
        • 1816, l'année sans été
        • Chansons à 4 accords
        • Éviter de perdre le contenu rédigé sur le web
        • Épileptique neuf à vendre
        • Formule pour calculer la densité de la bière
        • Citation no. 79 sur l'éducation
        • Rework, un livre plein de gros bon sens
        • Servez à ce monsieur une bière et des kiwis
        • Reporter l'interprétation JavaScript avec defer
        • La cuillère est une arme dangereuse
        • Je suis un programmeur ninja !
        • Attention aux extensions multiples sur Apache
        • Formater un champ monétaire en JavaScript
        • Citation no. 78 sur la vieillesse
        • Étrange détail dans les Fraggle Rock
        • Pages web en unicode (UTF-8)
        • Death Star Logo de AT&T
        • David le gnome, version métal
        • Améliorer la performance d'une boucle en PHP
        • FIMAV, John Zorn et la poutine
        • Service de géolocalisation GeoBytes IP Locator
        • HTML 5 : test de fureteurs
        • Citation no. 77 sur la faim
        • Créer des graphiques de statistiques gratuitement
        • Invasion de New York City en pixels
        • Pourquoi j'ai viré ma secrétaire
        • Amazon et UPS : duo imbattable
        • 7 autres équivalences Prototype vs jQuery
        • Job de professionnel
        • Les aventures de Sivis Pacem et Para Bellum
        • Créer une page de maintenance pour un site
        • Citation no. 76 sur la programmation
        • 3 façons de dessiner un cercle avec GIMP
        • Ce petit personnage sympathique
        • Poisson d'avril 2010
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft