Esempi di utilizzo per i widget IBM Gauge

I widget misuratori forniti rappresentano una modalità di visualizzazione grafica dei dati numerici. Vengono forniti due widget misuratori: AnalogGauge e BarGraph. Il codice di esempio riportato in questo argomento è disponibile anche per il misuratore analogico e per il grafico a barre.

Widget AnalogGauge

Il widget misuratore analogico consente di visualizzare i dati su un misuratore circolare, ad esempio un tachimetro o un manometro. Per creare un misuratore analogico, determinare prima la forma da assegnargli, gli indicatori da visualizzare su tale misuratore, gli intervalli da creare e altri fattori.

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

Il codice precedente crea un nuovo widget di misuratore analogico,situato nel div con un ID testGauge. Attualmente il misuratore non dispone di intervalli, indicatori o segni di spunta. L'area di dati per il misuratore viene indicata, tuttavia, dai parametri inoltrati.

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'});

Questo codice aggiunge cinque intervalli al misuratore, con valori basso, alto e orientativo. Il valore orientativo viene visualizzato quando il mouse specifica tale particolare intervallo.

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

Il misuratore presenta ora segni di spunta ogni cinque unità, con una piccola linea e il valore indicato nel testo. Il loop for nel metodo precedente è un processo più efficiente rispetto alla scrittura dei valori per ogni singolo segno di spunta.

In seguito, aggiungere un indicatore freccia al misuratore, rendendolo funzionalmente completo.

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

I parametri trasmessi vengono descritti nell'argomento Riferimento ai misuratori. Tuttavia, il parametro value specifica il valore numerico corrente sul misuratore in cui l'indicatore è posizionato inizialmente. Il parametro type indica il tipo di indicatore. Per un misuratore analogico, i valori disponibili sono arrow e line. La lunghezza e la larghezza indicano la dimensione della freccia, mentre i parametri hover e title specificano il testo attribuito con l'indicatore.

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

Una volta creato un indicatore di destinazione, è possibile indicare l'obiettivo o una soglia di avvertenza. Esistono diverse possibilità, dal momento che è possibile aggiungere un numero infinito di indicatori al misuratore.

Se è stato eseguito il codice o utilizzata la versione completa alla fine di questo argomento, si noterà che gli indicatori con titoli presentano delle caselle sotto al misuratore, le quali indicano valori numerici. Tali caselle vengono visualizzate per impostazione predefinita per garantire che tale widget sia accessibile per coloro che utilizzano i programmi di lettura su schermo, ad esempio per la visualizzazione della pagina. Le caselle possono essere disabilitate impostando il parametro hideValues su true sul misuratore stesso. Tuttavia, la disabilitazione delle caselle rende il widget inaccessibile. Il parametro è lo stesso sul widget del grafico a barre.

Widget del grafico a barre

Il widget del grafico a barre viene utilizzato per visualizzare graficamente le informazioni numeriche in un grafico a barre. Esistono più possibilità come con il widget del misuratore analogico. È possibile aggiungere qualsiasi numero di barre, indicatori, segni di spunta, testo e altro al widget. Consultare il seguente esempio di markup:

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

In questo esempio, si aggiunge uno sfondo di gradiente al grafico a barre. La seguente procedura si applica anche al widget del misuratore analogico, poiché è gestita dalla superclasse _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;

Questo codice aggiunge un gradiente verticale, lineare che inizia da un colore bianco all'inizio e arriva ad un grigio chiaro alla fine, per lo sfondo del grafico a barre. Sono disponibili tre tipi di gradienti. Per ulteriori informazioni, consultare l'argomento Riferimento ai misuratori.

Come avviene con il widget del misuratore analogico, è possibile aggiungere i seguenti intervalli e segni di spunta:

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
	});
}

Infine è possibile aggiungere una destinazione e indicatori di valore. Per il widget del grafico a barre, l'indicatore target è sempre il tipo line; tuttavia l'indicatore value è il tipo 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);

Il grafico a barre è ora completo. Gli indicatori target e value possono essere spostati con un'azione di trascinamento dal grafico ai nuovi valori. Inoltre, è possibile modificare i valori nelle caselle di valori sottostanti il grafico a barre. Come avviene con il misuratore analogico, tali caselle indicano che il valore può essere disabilitato.


Codice di esempio di 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>

Codice di esempio di 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>