Notre premier graphe avec RGRAPH

Graphe en barres verticales

Maintenant que nous avons vu comment préparer l'environnement de RGRAPH, voyons un premier exemple de génération de graphe très simple.

Nous avons besoin des composants suivants de la librairie RGRAPH, composants appelés dans l'en-tête de notre page HTML:

<script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script>
<script type="text/javascript" src="../libraries/RGraph.bar.js" ></script>

Dimensions du graphe

La dimension du graphe est indiquée au travers des attributs de CANVAS:

<canvas id="myCanvas" width="500" height="250">[canvas non supporté]</canvas>

Liste des attributs

• id qui sera l'identifiant unique de notre graphe, ici myCanvas. SI vous gérez plusieurs graphes dans une même page HTML, utilisez un id par graphe.
• width est la largeur, exprimée en pixels de notre graphe, 500 pixels pour notre exemple;
• height est la hauteur, exprimée en pixels de notre graphe, 250 pixels pour notre exemple.

Vous pouvez appliquer à CANVAS d'autres attributs CSS: positionnement, bordure, etc...

<canvas id="myCanvas" width="500" height="250"
    style="border:1px solid grey;background-color:#cfcfff;">[canvas non supporté]</canvas>

Ici le graphe s'affichera avec un bord de 1 pixel en gris foncé, sur fond bleu clair.

Pour la suite de notre premier graphe, nous ne mettrons ni bordure ni fond coloré.

Afficher nos premières valeurs

Nous avons un dépôt de vente et nous souhaitons visualiser les commandes passées sur une semaine.

Voici les valeurs de vente à afficher sur cette semaine:

   12,22,14,4,10,17,8

Voyons déjà l'écriture du script qui exploite la librairie RGRAPH:

<script>
    window.onload = function ()
    {
        var data = [12,22,14,4,10,17,8];
        var bar = new RGraph.Bar('myCanvas', data)
        .Set('labels', ['lun','mar','mer','jeu','ven','sam','dim'])
        .Set('gutter', 45)
        .Set('colors', ['#ffa640'])
        .Draw();
    }
</script>

Résultat de notre premier graphe très simple:

Ce premier graphe s'affichera de manière quasi identique dans le navigateur IE6, IE7, IE8, Firefox toutes versions, Chrome toutes versions et sur tous les navigateurs modernes.

Injection de valeurs

Dans notre code JS, nous avons inséré les valeurs de manière littérale. Voyons maintenant comment coté serveur un script PHP va injecter des données dynamiquement.

Tout d'abord, mettons nos valeurs dans une variable PHP:

<?php
$datasGraphe = "[12,22,14,4,10,17,8]";
?>

Cette déclaration est à faire n'importe où avant notre script JS. Pour récupérer ces données dans le script JS, on le modifie:

<?php $datasGraphe = "[12,22,14,4,10,17,8]"; ?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
        var bar = new RGraph.Bar('myCanvas', data)
        .Set('labels', ['lun','mar','mer','jeu','ven','sam','dim'])
        .Set('gutter', 45)
        .Set('colors', ['#ffa640'])
        .Draw();
    }
</script>

Ne pas oublier non plus de transformer l'extension de notre fichier qui héberge ce script de .html en .php.

On va procéder de même pour les labels:

<?php
$labelsGraphe = "['lun','mar','mer','jeu','ven','sam','dim']";
?>

Et notre script JS devient:

<?php 
    $datasGraphe = "[12,22,14,4,10,17,8]"; 
    $labelsGraphe = "['lun','mar','mer','jeu','ven','sam','dim']";
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
        var bar = new RGraph.Bar('myCanvas', data)
        .Set('labels', <?php echo $labelsGraphe; ?>)
        .Set('gutter', 45)
        .Set('colors', ['#ffa640'])
        .Draw();
    }
</script>

ATTENTION: l'intégration de code PHP dans notre script JS n'est possible que si ledit script est dans un fichier d'extension .php ou chargé par une fonction include depuis un fichier d'extension .php et exécuté coté serveur!

Exemple de graphe de données mensuelles

A partir de notre exemple très simple, il devient facile d'injecter d'autres valeurs, pour réaliser par exemple un graphe de données mensuelles:

<?php 
    $datasGraphe = "[45,27,12,22,14,4,10,17,8,10,22,55]"; 
    $labelsGraphe = "['jan','fev','mar','avr','mai','jun',"
    . "'jul','aou','sep','oct','nov','dec']";
?>

Et le graphe qui en résulte:

Voyons maintenant comment modifier l'aspect de notre graphe