Diagramme rectangulaire, diagramme en bâtons, histogramme avec l'élément CANVAS de l'API HTML 5

Le 13 Février 2011

Représentation graphique d'un diagramme rectangulaire, ou diagramme en bâtons ou histogramme

La représentation graphique d'une série statistique par un diagramme rectangulaire, ou un diagramme en bâtons ou un histogramme intégré à une page web peut se faire de différentes manières, avec différentes technologies (JavaScript, SVG, Flash).

Je ne vais comparer pas les différentes technologies, ce n'est pas le sujet. En revanche, je vais détailler la manière de le faire en JavaScript, avec l'élément CANVAS de l'API HTML 5. En une soixantaine de lignes de code JavaScript on obtiendra ce qu'on voit sur l'image à gauche: compatible avec la dernière version de Firefox, Chrome, Safari, Internet Explorer 9 et Opera.

On réutilisera les méthodes en JavaScript introduites ici, plus une nouvelle méthode.

Série statistique

On suppose une série statistique à 2 entrées. Pour cela, on crée 2 tableaux de 4 valeurs à une dimension. On aurait pu le faire avec un seul tableau à 2 dimensions. La série statistique donnée est un exemple, aucun sondage ou étude a été réalisée. (x0, y0)={0,0} est l'origine du repère.

Rappel: Pour x=5, y=3 : on a x qui se déplace de gauche à droite et y de haut en bas.

// Données statistiques
var minutes = [140,220,180,100];
var ages = ['0 à 15 ans','16 à 35 ans','36 à 55 ans','Plus de 56 ans'];
				
// Origine du repère
context.translate(150,320);
var x0 = 0;
var y0 = 0;

Axe des abscisses et des ordonnées

Un graphique sans axe des abscisses, ni axe des ordonnées, ni légende n'est pas un graphique. Il nous faut dessiner ses axes et ajouter une légende. Dans le précédent article, on a crée une fonction qui trace un simple trait. On réutilise cette fonction pour tracer nos axes des abscisses et des ordonnées en faisant attention à ne pas dépasser le cadre du canvas, mais aussi des flèches sur les 2 axes.

// Fonction de tracer de trait
function tracer_trait(ctx,x1,y1,x2,y2)  {
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.closePath();
	ctx.stroke();
}

// Couleur et largeur du trait
context.fillStyle = '#000';
context.lineWidth = '1.0';

// Axe des abscisses
tracer_trait(context,x0,y0,420,y0);
// Flèche
tracer_trait(context,410 - 3,y0 - 8,410 + 10,y0);
tracer_trait(context,410 - 3,y0 + 8,410 + 10,y0);

// Axe des ordonnées
tracer_trait(context,x0,y0,x0,- 310);
// Flèche
tracer_trait(context,x0 - 8,- 300 + 3,x0,- 300 - 10);
tracer_trait(context,x0 + 8,- 300 + 3,x0,- 300 - 10);

On ajoute un titre pour les 2 axes.

context.fillText('Minutes par semaine',x0 - 80,y0 - 280);

context.fillText('Groupe d\'âge',x0 + canvas.width - 260,y0 + 60);

On gradue l'axe des ordonnées avec un pas de 20. On dessine la graduation et on ajoute le chiffre correspondant à la graduation.

context.textAlign = 'center';
context.font = '9pt Tahoma';
var graduation = 0;
var pas = 20;
for(var i=0;i<13;i++) {
	tracer_trait(context,x0 - 3,y0 - 20 * i,x0 + 3,y0 - 20 * i);
	graduation = pas * i;
	context.fillText(graduation,x0 - 20,y0 - graduation + 4);
}

Il ne reste plus qu'à ajouter la légende en-dessous de l'axe des abscisses. À cela s'ajoute une difficulté supplémentaire. On voudrait que le texte soit centré par rapport à la largeur du rectangle détaillé plus bas. La méthode measureText mesure la largeur ou la hauteur d'un texte, la largeur du rectangle est soustrait par la largeur du texte, le résultat est divisé par 2. Au final, sous l'axe des abscisses, la position selon l'axe des x du texte est décalée pour que le texte soit centré au mieux par rapport à la largeur du rectangle.

for(i=0;i<minutes.length;i++) {
	context.fillStyle = '#000';
	var mesure_texte = context.measureText(ages[i]).width;
	var centrer_texte = (largeur_barre - mesure_texte) / 2;
	context.fillText(ages[i],x0 + 10 + centrer_texte + i * largeur_barre + 5 * i,y0 + 18);
}

Diagramme rectangulaire

Avec la propriété rect, on trace le rectangle en fonction des données de la série statistique.

for(i=0;i<minutes.length;i++) {
	context.fillStyle = 'grey';				
	context.beginPath();
	context.rect(x0 + 10 + i * largeur_barre + 5 * i,y0 - 1 - minutes[i],largeur_barre,minutes[i]);
	context.closePath();
	context.stroke();
	context.fill();
}

Quelques améliorations dans le code sont à prévoir mais l'essentiel est là.

Références

https://developer.mozilla.org/en/drawing_text_using_a_canvas
https://developer.mozilla.org/en/HTML/Canvas

Autres articles à lire

Diagramme circulaire, diagramme en secteur circulaire, camembert avec l'élément CANVAS de l'API HTML 5
CANVAS API HTML 5 : Dessiner, animer, créer des graphiques, des images

Twitter

Blog