Tutoriel jqPlot : courbe d'évolution

Création de site internet, développement open source, formations

Tutoriel jqPlot : courbe d'évolution

Soumis par webapart le mar, 22/06/2010 - 16:23

Objectif : une belle courbe

Comme promis lors de la rédaction du premier billet sur jqPlot, voici un premier tutoriel pour voir un peut comment fonctionne cette librairie javascript.

Notre objectif sera donc de réaliser une courbe toute simple montrant l'évolution de la fréquentation d'un site internet dans le temps.

Voici ce que ça donnera au final : courbe d'évolution jqplot .

Télécharger jqPlot

Nous allons commencer par créer quelque part sur le disque dur un dossier jqplot.

Téléchargeons ensuite la dernière version de jqPlot (actuellement la 0.9.7 disponible ici). On dézippe l'archive dans notre dossier jqplot. Notons que la librairie jquery, dont est dépendante jqPlot, est incluse dans l'archive.

L'archive contient également un dossier plugins (fichiers javascript) et un dossier très fourni d'exemples en tout genre.

On va maintenant créer le fichier courbe.html dans le dossier jquery. C'est ici que tout va se passer.

Charger les librairies

JqPlot est composé de multiples fichiers javascript englobant des fonctionnalités plus ou moins autonomes.

Dans notre cas, nous allons dans un premier temps inclure les fichiers suivants :

jquery-1.3.2.min.js : la librairie jquery dont dépend jqPlot
jquery.jqplot.js : le coeur de la librairie jqPlot
jquery.jqplot.css : la feuille de style, nécessaire au correct affichage des graphiques

C'est le strict minimum.

Voici donc le code contenu par courbe.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <head>
    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.jqplot.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
  </head>

  <body>
  <body>

</html>

Initialisation des données

Nous allons ici des données entrées en dur. Il va de soir que celles-ci proviennent normalement d'une base de données ayant stocké l'évolution des visites jour après jour.

Attention, il faut veiller à ne lancer le code de création du graphique qu'une fois le DOM chargé, donc dans l'évènement 'ready' lancé par jquery.

<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var serie = [[1, 100], [2, 92], [3, 110], [4, 130], [5, 144]];
  }
</script>

Création du graphique

Il est maintenant temps de créer le graphique. Celui-ci apparaitra dans un conteneur qu'il faut définir en html :

<div id="conteneur"></div>

Ensuite, il faut utiliser la fonction jqplot pour créer le graphique :

courbe = $.jqplot('conteneur', [serie], {
  title: 'Courbe d\'évolution des visites'
});

Si vous lancez le fichier dans votre navigateur, vous pouvez voir apparaitre notre courbe, si belle et prometteuse.

Personnaliser les marques sur les axes

Tout n'est pas parfait cependant. En effet, les axes contiennent des valeurs décimales peu utiles.

Nous allons donc forcer l'affichage des marques avec des valeurs que nous allons fournir :

courbe = $.jqplot('conteneur', [serie], {
  title: 'Courbe d\'évolution des visites',
    axes : {
      xaxis : {
         ticks: [[1,'16/06/2010'], [2,'17/06/2010'], [3,'18/06/2010'], [4,'19/06/2010'], [5,'20/06/2010']]
      },
      yaxis : {
         ticks: [75, 100, 125, 150]
      }
  }
});

Et voilà, on obtient maintenant le résultat final attendu.