gRaphael, axes et graduations – tips

Je cherchais à personnaliser les textes de l’axe des x d’un graphique de type « linechart » fait en gRaphael.

En effet, il n’est pas possible de personnaliser les textes affichées sur les différents axes. Or je voulais pouvoir avoir un graphique pour lequel j’avais des données journalières, mais pouvoir afficher des graduation toutes les semaines.

N’ayant rien trouvé sur les tubes, j’ai donc décidé de creuser un peu dans le code, et voici ce que j’ai trouvé. Ceci est donc plus une note personnelle… En espérant que cela pourra aussi servir à quelqu’un.

Bon, je commence par la fin: voici un jsFiddle illustrant le résultat. Vous voyez comment les graduations de l’axe des y est pas beau? Les nombres affichés ne sont pas très « ronds »… J’ai ici corriger le tir pour l’axe des x.

J’ai utilisé une fonction utilitaire de graphael, Raphael.g.axis. J’ai noté que il y avait un paramètre label! Et en utilisant le debugger, la version non-minifiée de graphael, et en regardant comment g.line.js utilise cette foncction , j’ai pu comprendre son fonctionnement et voici ce qu’il faut faire pour avoir un axe des x avec des textes sous forme de texte:

var r = Raphael('testGraph', 320, 220);

// Creates a simple line chart at 10, 10
// width 300, height 200
var x = 10
,    y = 10
,    xlen = 300
,    ylen = 200
,    gutter = 20
, xdata = [0,2,4,6,8,10]
;
var chrt = r.linechart(x,y,xlen,ylen,xdata,[30,10,20,15,35,30], { gutter: gutter, nostroke: false, axis: "0 0 0 1", symbol: "circle", smooth: true });
// default gutter: 10
              //x, y, length, from, to, steps, orientation, labels, type, dashsize, paper
Raphael.g.axis(
    x + gutter, // 10 + gutter
    y + ylen - gutter, //y pos
    xlen - 2*gutter,
    null, null, // used to pass the initial value and last value (number) if no labels are provided
    xdata.length - 1, // number of steps
    0,
    ['0', '-2-', '-4-', '-6-', '-8-', '-10-'], // the labels
    r // you need to provide the Raphael object
);

Donc vous pouvez facilement controler le nombre de graduations et les textes affichés sur les axes. Pas pire, non?

Bon, si vous voulez aller plus loin (changer la police de caractères par exemple), il va falloir que vous fassiez votre propre fonction axis…

Bonus

documentation graphael

Si vous cherchez un peu de documentation sur graphael, voici quelques liens:

Documentation (manque de)

(en date du 11 mars 2012) Le code d’exemple sur la page d’accueil n’est pas bon:

// il y a ça:
// r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2]);
// mais ça devrait être ça
r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2]);

11. mars 2012 par Saad Tazi
Catégories: Non classé | 2 commentaires

(2) commentaires

  1. Merci beaucoup !!!

  2. Pour information, si demain je devais faire des graphes, j’irais plus avec une librairie comme dimple car elle est plus evoluée.

Laisser un commentaire

Les champs obligatoires sont indiqués avec *