HTML5 / CSS 2.x/3 / PHP / MySQL ...

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:

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:

graphe obtenu avec RGraph

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

Tous les articles sur ce thème