La classe box-plot

Pour la création du contenu de la classe du box-plot nous allons nous appuyer sur un framework javascript relativement bien pensé pour tout ce qui touche au graphisme, il s’agit de « raphaeljs ».
Ce petit framework permet de créer un objet de type Raphael, cet objet fournit un canvas sur un panel div contenu dans le browser.
L'utilité d'un framework n'est plus à démontrer puisqu'il permet:
- de ne pas ré-inventer la roue
- de déléguer à d'autres personnes plus expertes des tâches secondaires pour notre projet
- de se focaliser sur notre propre business
- de profiter des évolutions et des améliorations du framework sans devoir mettre les mains dans le camboui.
Ce canvas supporte différente méthode graphiques donc la méthode « path » basée sur une notation SVG (Scale Vector Graphics).
Path prend comme une paramètre une string constituée des attributs suivant : M x y, ce qui signifie MoveTo (x,y) en pixel et L x y, ce qui signifie LineTo.
Une autre méthode très utile est la méthode « text ».
X – coordonnée x en pixels
Y – coordonnée y en pixels
Text – une string contenant le texte à afficher.
Sur base de ces méthodes il est donc très aisé de construire notre classe boxplot .

Le framework raphaeljs peut-être télécharger ici

Et voici le code du boxplot:

function BoxPlot ( min, q1,q2,q3, max, mean, divTarget) {
this._divTarget=null;
this._name=name;
this._min=min;
this._q1=q1;
this._q2=q2;
this._q3=q3;
this._max=max;
this._mean=mean;

if (divTarget) this._divTarget=$(divTarget);

this.show=function () {

var sWidth=this._divTarget.style.width;
var sHeight=this._divTarget.style.height;
var iMaxX=sWidth.substring(0,sWidth.length-2); //this._divTarget.style.width.substring(1,;
var iMaxY=sHeight.substring(0,sHeight.length-2); //this._divTarget.style.height;
var q1_y=iMaxY*this._q1/this._max;
var q2_y=iMaxY*this._q2/this._max;
var q3_y=iMaxY*this._q3/this._max;
var mean_y=iMaxY*this._mean/this._max;

var canvas= Raphael(this._divTarget, sWidth, sHeight);
// top whisker
var ibx=0.20*iMaxX;
var iex=0.80*iMaxX;
canvas.path("M"+ibx+" "+iMaxY+" L "+iex+" "+iMaxY);
canvas.path("M"+ibx+" "+(iMaxY-1)+" L "+iex+" "+(iMaxY-1));
var imx=0.50*iMaxX;
// Box Plot
canvas.path("M"+imx+" "+iMaxY+" L "+imx+" "+(iMaxY-q1_y));
canvas.path("M 0 "+ (iMaxY-q1_y)+ " L "+iMaxX+" "+(iMaxY-q1_y));
canvas.path("M 0 "+ (iMaxY-q1_y)+ " L 0 "+(iMaxY-q2_y) );
canvas.path("M "+iMaxX+" "+ (iMaxY-q1_y)+ " L "+iMaxX+" "+(iMaxY-q2_y) );
canvas.path("M 0 "+ (iMaxY-q2_y) + " L "+iMaxX+" "+(iMaxY-q2_y) );
canvas.path("M 0 "+(iMaxY-q2_y)+" L 0 "+(iMaxY-q3_y) );
canvas.path("M "+iMaxX+" "+(iMaxY-q2_y) +" L "+iMaxX+" "+(iMaxY-q3_y));
canvas.path("M 0 "+(iMaxY-q3_y)+" L "+iMaxX+" "+(iMaxY-q3_y));
canvas.path("M "+imx+" "+(iMaxY-q3_y)+" L "+imx+" 0");
canvas.path("M "+ibx+ " 0"+" L "+iex+" 0");
canvas.path("M "+ibx+ " 1"+" L "+iex+" 1");
// Legend
canvas.text(16,4, ""+this._max);
canvas.text(16,(iMaxY-q3_y)+4, ""+this._q3);
canvas.text(16,(iMaxY-q2_y)+4, ""+this._q2);
canvas.text(16,(iMaxY-q1_y)-5, ""+this._q1 );
canvas.text(16,iMaxY-8, ""+this._min);
canvas.text(imx, (iMaxY-mean_y), "X");

}
}