Modifier l'aspect d'un graphe

Gérer l'axe vertical

Revenons sur notre premier graphe simple:

<?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']";
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $labelsGraphe; ?>)
            .Set('colors', ['#ffa640'])
            .Draw();
        }
    }
</script>

Nous allons agir sur ce graphe en commençant par son cadrage

Modifier le cadrage du graphe

Le graphe est dessiné dans un cadre dont les limites sont celles de notre élément HTML5 canvas. Pour visualiser ces limites, remettons la bordure grise à canvas

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

Notre graphe, hors légendes en bas et à gauche, est cadré de manière équidistante dans le cadre gris. Nous pouvons agir sur ce cadrage en modifiant les propriétés gutter.right et gutter.top. Extrait du code:

// ...début du script
    .Set('gutter.top', 10)
    .Set('gutter.right', 1)
// ...suite du script

Nous venons d'agrandir notre graphe sans toucher aux dimensions de notre élément HTML5 canvas.

Le graphe est dessiné par défaut à 25 pixels du bord de canvas. Ici nous avons ramené la bordure haute à 10 pixels, la bordure droite à 1 pixel.

Les bordures sont contrôlées au travers des propriétés suivantes:

• gutter.bottom
• gutter.left
• gutter.right
• gutter.top

La légende du graphe sur l'axe horizontal s'affiche dans la marge basse. Il est déconseillé de mettre cette marge à une valeur trop petite, sauf si on ne veut pas afficher de légende le long de l'axe horizontal.

La légende du graphe sur l'axe vertical s'affiche dans la marge gauche. Il est déconseillé de mettre cette marge à une valeur trop petite, sauf si on ne veut pas afficher de légende le long de l'axe vertical.

Graduation verticale fixe

Dans notre graphe de base, toute modification de valeur va automatiquement ajuster l'affichage de toutes les barres en proportion de la barre la plus haute.

Notre graphe de base:

Le même script avec d'autres valeurs:

Si nous avons connaissance que la valeur de chaque barre ne dépassera pas un certain seuil, il est intéressant de fixer cette valeur de seuil:

    .Set('ymax', 100)

Au passage, nous indiquons le nombre de valeurs à afficher en légende sur cet axe vertical:

    .Set('ylabels.count', 5)

On rajoute des graduations sur cet axe vertical:

    .Set('numyticks', 20)

Puis nous augmentons le nombre de lignes horizontales du quadrillage de notre graphe:

    .Set('background.grid.autofit.numhlines', 10)

Et enfin, nous basculons de 90° le texte des légendes de l'axe horizontal:

    .Set('text.angle',90)

Script complet:

<?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']";
?>
<script>
    window.onload = function ()
    {
        var data = <?php echo $datasGraphe; ?>;
 
        var bar = new RGraph.Bar('myCanvas', data)
            .Set('labels', <?php echo $labelsGraphe; ?>)
            .Set('ymax', 100)
            .Set('ylabels.count', 5)
            .Set('numyticks', 20)
            .Set('text.angle',90)
            .Set('background.grid.autofit.numhlines', 10)
            .Set('colors', ['#ffa640'])
            .Draw();
        }
    }
</script>

Barres de graphe en perspective 3D

En rajoutant simplement cette ligne:

    .Set('variant', '3d')

nous affichons les barres de notre graphe en perspective 3D:

On peut accentuer l'effet 3D par un chanfrein:

    .Set('bever', 'true')

Voyons maintenant comment changer les couleurs de notre graphe