Exemples d'utilisation des widgets Gauge d'IBM

Les widgets Gauge fournis constituent un moyen permettant d’afficher les données numériques sous forme graphique. Deux types de widgets Gauge sont fournis : AnalogGauge BarGraph. L'exemple de code présenté dans cette rubrique est également disponible pour la jauge analogique et le diagramme à barres.

Widget AnalogGauge

Le widget de jauge analogique constitue un moyen permettant d'afficher des données sur une jauge circulaire, telle qu'un indicateur de vitesse linéaire ou une jauge de pression. Pour créer une jauge analogique, déterminez en premier lieu la forme de la jauge, les indicateurs à afficher, la plage que vous voulez créer dans l'intervalle, ainsi que d'autres facteurs.

<div	dojoType="ibm_gauge.widget.AnalogGauge"
	id="testGauge"
	cx=150
	cy=175
	radius=125></div>

Le code précédent permet de créer un widget de jauge analogique situé dans div, comportant un ID de testGauge. Dans le cas présent, la jauge ne comporte pas d'intervalle, d'indicateurs ou de marques de graduation. La zone de données de la jauge est cependant affichée par les paramètres transmis.

var g = dijit.byId("testGauge");
g.addRange({low:0, high:10, hover:'0 - 10'});
g.addRange({low:10, high:20, hover:'10 - 20'});
g.addRange({low:20, high:30, hover:'20 - 30'});
g.addRange({low:30, high:40, hover:'30 - 40'});
g.addRange({low:40, high:50, hover:'40 - 50'});

Ce code permet d'ajouter cinq intervalles sur la jauge et inclut des valeurs adéquates low (inférieur), high (supérieur) et hover (intermédiaire). La valeur hover s'affiche lorsque la souris pointe vers cet intervalle particulier.

for(var i=0; i<=50; i+=5){
	g.addIndicator({ value:i, 
			 type:'line', 
			 length:5, 
			 offset:125,
			 label:''+i});
}

La jauge affiche maintenant des marques de graduation toutes les cinq unités, avec un petit trait et la valeur indiquée en texte plein. L'utilisation de la boucle for de la méthode précédente est plus efficace que d'écrire les valeurs individuelles de chaque marque de graduation.

Ajoutez ensuite un indicateur arrow (flèche) sur la jauge pour que les fonctionnalités soient complètes.

var valueIndicator = {
	value:17, 
	type:'arrow',
	color: 'yellow',
	length: 135, 
	width: 3,
	hover:'Value: 17', 
	title: 'Value'
};
g.addIndicator(valueIndicator);

Les paramètres transmis sont décrits dans la rubrique Référence des widget Gauge. Cependant, le paramètre value indique la valeur numérique courante affichée sur la jauge à l'emplacement initial de l'indicateur. Type indique le type de l'indicateur. Pour les jauges analogiques, les valeurs disponibles sont arrow (flèche) et line (ligne). Les paramètres length (longueur) et width (largeur) indiquent la taille de la flèche. Les paramètres hover et title indiquent le texte attribué à l'indicateur.

var targetIndicator = {
	value:6, 
	type:'line', 
	color:'red', 
	width: 3,
	hover:'Target: 6', 
	title: 'Target'
};
g.addIndicator(targetIndicator);

Maintenant que vous avez créé l'indicateur target, indiquez également l'objectif ou un seuil à ne pas dépasser. Plusieurs possibilités s'offrent à vous étant donné que vous pouvez ajouter un nombre quelconque d'indicateurs à la jauge.

Si vous avez exécuté votre code ou si vous avez utilisé une version intégrale à l'issue de cette rubrique, vous vous rendrez compte que les indicateurs comportant des titres sont pourvus de boîtes à l'intérieur des jauges qui indiquent les valeurs numériques. Ces boîtes sont affichées par défaut pour assurer l'accessibilité de ce widget par les utilisateurs de lecteurs d'écrans afin de visualiser la page, par exemple. Vous pouvez désactiver les champs en réglant le paramètre hideValues de la jauge sur true. Cependant, en les désactivant, vous interdisez l'accès au widget. Le paramètre est le même que celui du widget diagramme à barres.

Widget de diagramme à barres

Le widget de diagramme à barres permet d'afficher les informations numériques sous forme de diagramme à barres. Plusieurs possibilités s'offrent à vous en termes de widget de jauge analogique. Sur le widget vous pouvez ajouter des barres, des indicateurs, des marques de graduation, un élément texte et d'autres choses encore. Examinez l'exemple de graduation suivant :

<div	dojoType="ibm_gauge.widget.BarGraph"
	id="testBarGraph"
	widgetId="testBarGraph"
	executeScripts="true"
	gaugeHeight="55"
	dataY="25"
	dataHeight="25"
	dataWidth="225"/>

Dans cet exemple, vous ajoutez un arrière plan en gradient sur le diagramme à barres. Les étapes suivantes s'appliquent également au widget de jauge analogique étant donné qu'ils sont gérés par la super classe _Gauge.

var bg = dijit.byId("testBarGraph");
var fill = {
	type: "linear",
	x1: bg.gaugeWidth/2,
	x2: bg.gaugeWidth/2,
	y2: 0,
	y1: bg.gaugeHeight,
	colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
};
bg.gaugeBackground = fill;

Ce code permet d'ajouter un gradient vertical et linéaire, de couleur blanche au début pour se terminer par une couleur gris clair, pour l'arrière plan du diagramme à barres. Trois types de gradients sont disponibles. Pour plus d'informations, reportez-vous à la rubrique Référence des widgets Gauge.

Tout comme pour le cas du widget de jauge analogique, vous pouvez également ajouter les intervalles et les marques de graduation suivants :

bg.addRange({low:0, high:10, hover:'0 - 10'});
bg.addRange({low:10, high:20, hover:'10 - 20'});
bg.addRange({low:20, high:30, hover:'20 - 30'});
bg.addRange({low:30, high:40, hover:'30 - 40'});
bg.addRange({low:40, high:50, hover:'40 - 50'});
	
for(var i=0; i<=50; i+=5){
	bg.addIndicator({
		value:i, 
		type:'line', 
		length:5, 
		offset:-5,
		width: 1,
		label:''+i
	});
}

Vous pouvez enfin ajouter des indicateurs target et value. En ce qui concerne le widget de diagramme à barres, l'indicateur target reste toujours de type line ; mais l'indicateur value est, lui, de type bar.

var valueIndicator = {
	value:17, 
	type:"bar", 
	width: 7,
	hover:'Value: 17',
	title: 'Value'
}
bg.addIndicator(valueIndicator);

var targetIndicator = {
	value:22, 
	type:"line", 
	color:'#D00000', 
	hover:'Target: 22',
	title: 'Target'
}
bg.addIndicator(targetIndicator);

Le diagramme à barres est à présent terminé. Vous pouvez déplacer les indicateurs target et value en les faisant glisser sur le diagramme vers les nouvelles valeurs. Par ailleurs, vous pouvez modifier les valeurs contenues dans les champs value du diagramme à barres. Tout comme avec la jauge analogique, vous pouvez désactiver ces champs indiquant la valeur.


Exemple de cod'AnalogGauge :

<div	dojoType="ibm_gauge.widget.AnalogGauge"
	id="testGauge"
	cx=150
	cy=175
	radius=125></div>
<script>
dojo.addOnLoad(function(){
	var g = dijit.byId("testGauge");

	g.addRange({low:0, high:10, hover:'0 - 10'});
	g.addRange({low:10, high:20, hover:'10 - 20'});
	g.addRange({low:20, high:30, hover:'20 - 30'});
	g.addRange({low:30, high:40, hover:'30 - 40'});
	g.addRange({low:40, high:50, hover:'40 - 50'});
	
	for(var i=0; i<=50; i+=5){
		g.addIndicator({ value:i,
	 			 type:'line',
				 length:5,
				 offset:125,
				 label:''+i});
	}

	var valueIndicator = {
		value:17, 
		type:'arrow', 
		color:'yellow',
		length: 135, 
		width: 3,
		hover:'Value: 17', 
		title: 'Value'
	};
	g.addIndicator(valueIndicator);

	var targetIndicator = {
		value:6, 
		type:'line', 
		color:'red', 
		width: 3,
		hover:'Target: 6', 
		title: 'Target'
	};
	g.addIndicator(targetIndicator);
});
</script>

Exemple de code BarGraph :

<div	dojoType="ibm_gauge.widget.BarGraph"
	id="testBarGraph"
	widgetId="testBarGraph"
	gaugeHeight="55"
	dataY="25"
	dataHeight="25"
	dataWidth="225"/>		
<script>
dojo.addOnLoad(function(){
	var bg = dijit.byId("testBarGraph");
	var fill = {
		type: "linear",
		x1: bg.gaugeWidth/2,
		x2: bg.gaugeWidth/2,
		y2: 0,
		y1: bg.gaugeHeight,
		colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
	};
	bg.gaugeBackground = fill;

	bg.addRange({low:0, high:10, hover:'0 - 10'});
	bg.addRange({low:10, high:20, hover:'10 - 20'});
	bg.addRange({low:20, high:30, hover:'20 - 30'});
	bg.addRange({low:30, high:40, hover:'30 - 40'});
	bg.addRange({low:40, high:50, hover:'40 - 50'});
	
	for(var i=0; i<=50; i+=5){
		bg.addIndicator({
			value:i, 
			type:'line', 
			length:5, 
			offset:-5,
			width: 1,
			label:''+i
		});
	}
	
	var valueIndicator = {
		value:17, 
		type:"bar", 
		width: 7,
		hover:'Value: 17',
		title: 'Value'
	}
	bg.addIndicator(valueIndicator);
	
	var targetIndicator = {
		value:22, 
		type:"line", 
		color:'#D00000', 
		hover:'Target: 22',
		title: 'Target'
	}
	bg.addIndicator(targetIndicator);
});
</script>