Utiliser CANVAS et la librairie RGRAPH

RGRAPH est sans doute la librairie graphique la plus innovante en matière de génération de graphes. Elle s'applique à l'élément CANVAS et offre une alternative très sérieuse à JPGRAPH.

Lien pour documentation et téléchargement de RGRAPH:
http://www.rgraph.net/

RGRAPH génère l'image sur le poste client et non sur le serveur comme JPGRAPH. Les avantages de cette solution sont nombreux:

• simplicité en allégeant les scripts générant les graphes. Un graphe est décrit en quelques lignes de code javascript;
• légèreté car on intègre le graphe dans le code HTML final généré par nos scripts. Le code javascript est beaucoup moins lourd que l'image générée sur servbeur si on utilisait JPGRAPH.
• soulagement du serveur. On décharge le serveur de la génération graphique. Il n'y a plus de gestion de tampons et nommage des images comme c'est le cas avec JPGRAPH.

La génération du graphe

Coté client, le navigateur doit gérer l'élément CANVAS. Si ce n'est pas le cas, avec quelques scripts js on peut rajouter les fonctions permettant d'exploiter RGRAPH à 90% même sur Internet Explorer 6...

On va d'abord intégrer la librairie RGRAPH. Pour le graphe ci-après, on intègre:

<script src="js/RGraph.common.core.js"></script>
<script src="js/RGraph.bar.js"></script>    

Ensuite, on décrit notre graphe. Ici le script javascript qui inclue des portions de code PHP (mais si, mais si!):

<script>
    window.onload = function ()  {
        var data = [<?php echo implode(',', $datasGraphe); ?>];
        var bar = new RGraph.Bar('myCanvas', data);
        bar.Set('chart.labels', [<?php echo $legendeAxeXgraphe; ?>]);
        bar.Set('chart.gutter', 45);
        bar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
        bar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
        bar.Set('chart.background.grid', true);
        bar.Set('chart.colors', ['#ffa640']);
        bar.Draw();
    }
</script>

Les variables $dataGraphe et $legendeAxeGraphe contiennent les valeurs mises en forme par un autre script php chargé de récupérer les données depuis la base de données, et les met en forme pour Javascript. Coté client, voici ce qu'on retrouve dans la page chargée d'afficher le graphe:

<script>
   window.onload = function () {
       var bar = new RGraph.Bar('myCanvas1', [173,184,129,194,168,148,133,238,170,184,250,73]);
       bar.Set('chart.labels', ['01','02','03','04','05','06','07','08','09','10','11','12']);
       bar.Set('chart.text.angle',90);
       bar.Set('chart.gutter.left', 80);
       bar.Set('chart.gutter.bottom', 80);
       bar.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
       bar.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
       bar.Set('chart.background.grid', true);
       bar.Set('chart.colors', ['#ffa640']);
       bar.Draw();
   }
</script>

Enfin, on intègre l'élément canvas:

<canvas id="Canvas1" width="800" height="350">[No canvas support]</canvas>

et qui affiche:

On ne rentre pas dans le détail du fonctionnement du script.

Notez simplement que ce graphe est généré coté client et non coté serveur!

Pour tout savoir sur la librairie RGRAPH, allez ici: débuter avec RGRAPH