Graphes avec plusieurs barres

Graphes à deux barres

Au fil des exemples, vous avez aperçu à plusieurs reprises des graphes à deux barres. Ces graphes ne sont pas plus complexes à générer que des graphes à une barre.

Script d'un graphe à deux barres:

<?php
    $datas  = "[[45,60],[65,30],[40,80],[115,100]]";
    $labels = "['Marc', 'Michel', 'Claude', 'Pierre']";
?>
<canvas id="myCanvas" width="500" height="250">[No canvas support]</canvas>
<script>
    window.onload = function ()
    {
        datas  = <?php echo $datas; ?>;
        labels = <?php echo $labels ?>;
 
        var bar5 = new RGraph.Bar('myCanvas', datas)
            .Set('colors', ['#CC1111', '#11CCCC'])
            .Set('labels', labels)
          //  .Set('strokestyle', 'transparent')
            .Set('ymax', 120)
            .Draw();
    }
</script>

Tout se joue dans la déclaration des données à afficher. Pour un graphe ordinaire à une barre par valeur, on déclare les valeurs ainsi:

    $datasGraphe = "[45,12,14,4]"; 

Dans notre exemple ci-avant, on déclare les couples de valeurs ainsi:

    $datas  = "[[45,60],[65,30],[40,80],[115,100]]";

Pour les barres de la valeur Michel, on aura les valeurs [65,30].

A quoi correspondent ces valeurs dans la vie réelle? Pour notre exemple, ce peut être les ventes réalisées par des vendeurs. Chaque couleur correspond à une catégorie de produits: alimentaire, autre...

Graphes à deux valeurs empilées

Nous allons utiliser la propriété grouping en lui donnant la valeur stacked.

    .Set('grouping', 'stacked')

Résultat:

Graphe à trois valeurs

Si vous avez bien suivi, ce ne sera guère plus compliqué de passer à un graphe à trois barres par valeur:

    $datas  = "[[45,60,17],[65,30,45],[40,80,20],[115,100,75]]";

On verra dans une section particulière comment passer de données en base de données à ces valeurs compatibles JavaScript.

Script complet:

<?php
    $datas  = "[[45,60,17],[65,30,45],[40,80,20],[115,100,75]]";
    $labels = "['Marc', 'Michel', 'Claude', 'Pierre']";
?>
<canvas id="myCanvas" width="500" height="250">[No canvas support]</canvas>
<script>
    window.onload = function ()
    {
        datas  = <?php echo $datas; ?>;
        labels = <?php echo $labels ?>;
 
        var bar5 = new RGraph.Bar('myCanvas', datas)
            .Set('colors', ['#CC1111', '#11CCCC','#CC11CC'])
            .Set('labels', labels)
            .Set('ymax', 120)
            .Draw();
    }
</script>

En utilisant la propriété grouping avec la valeur stacked on peut également empiler ces valeurs:

    .Set('grouping', 'stacked')

Résultat:

Mais avant d'aborder d'autre type de graphes, voyons maintenant en détail comment inter-agir avec la base de données et plus particulièrement comment récupérer les données et les présenter de manière adaptée à JavaScript