dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
280 lines (252 loc) • 5.8 kB
HTML
<html>
<head>
<title>Analog Gauge Widget Indicators</title>
<style>
@import "../_Gauge.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
djConfig = {
parseOnLoad: true,
isDebug: true
};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require('dojox.gauges.AnalogGauge');
dojo.require('dojox.gauges.AnalogArcIndicator');
dojo.require('dojox.gauges.AnalogNeedleIndicator');
dojo.require('dojox.gauges.AnalogCircleIndicator');
dojo.require('dojox.gauges.TextIndicator');
dojo.require('dijit.form.Button');
dojo.require('dojo.parser');
dojo.addOnLoad(init);
function init(){
var gauge = new dojox.gauges.AnalogGauge({
background: [200, 200, 200],
id: "gauge",
width: 250,
height: 200,
cx: 125,
cy: 150,
radius: 125,
ranges: [{
low: 0,
high: 100,
color: 'black'
}],
majorTicks: {
offset: 90,
interval: 10,
length: 3,
color: 'white'
},
indicators: [new dojox.gauges.AnalogArcIndicator({
value: 100,
width: 30,
offset: 60,
color: 'white',
noChange: true,
title: 'value',
hideValue: true
}), new dojox.gauges.AnalogArcIndicator({
interactionMode: "gauge",
value: 20,
width: 20,
offset: 65,
color: 'gray',
noChange: false,
title: 'value',
hideValue: true
}), new dojox.gauges.TextIndicator({
value: 20,
align: 'middle',
x: 125,
y: 135,
font: {
family: "Arial",
style: "normal",
variant: 'small-caps',
weight: 'bold',
size: "30px"
},
hideValue: false,
color: 'gray'
})]
}, dojo.byId("gauge"));
gauge.startup();
dojo.connect(gauge.indicators[1], "valueChanged", dojo.hitch(gauge, function(){
this.indicators[2].update(this.indicators[1].value);
}));
gauge = new dojox.gauges.AnalogGauge({
id: "gauge2",
startAngle: 0,
endAngle: 270,
background: 'white',
id: "defaultGauge",
width: 250,
height: 250,
cx: 127,
cy: 125,
radius: 125,
ranges: [{
low: 0,
high: 100,
color: 'white'
}],
majorTicks: {
offset: 95,
interval: 20,
length: 3,
color: 'black',
labelPlacement: 'outside'
},
indicators: [new dojox.gauges.AnalogArcIndicator({
value: 1000,
width: 30,
offset: 65,
strokeColor: 'black',
color: 'white',
noChange: true,
title: 'value',
hideValue: true
}), new dojox.gauges.AnalogArcIndicator({
value: 20,
width: 20,
offset: 70,
interactionMode: "gauge",
color: [122, 103, 140],
noChange: false,
title: 'value',
hideValue: true
}), new dojox.gauges.TextIndicator({
value: 20,
align: 'middle',
x: 125,
y: 140,
font: {
family: "Arial",
style: "normal",
variant: 'small-caps',
weight: 'bold',
size: "40px"
},
hideValue: false,
color: 'gray'
})]
}, dojo.byId("gauge2"));
gauge.startup();
dojo.connect(gauge.indicators[1], "valueChanged", dojo.hitch(gauge, function(){
this.indicators[2].update(this.indicators[1].value);
}));
gauge = new dojox.gauges.AnalogGauge({
id: "gauge3",
startAngle: -30,
endAngle: 30,
background: 'white',
width: 200,
height: 180,
cx: 100,
cy: 150,
radius: 130,
ranges: [{
low: -30,
high: 30,
color: 'white'
}],
majorTicks: {
offset: 100,
interval: 10,
length: 3,
color: 'black',
labelPlacement: 'outside'
},
indicators: [new dojox.gauges.AnalogNeedleIndicator({
interactionMode: "gauge",
value: 0,
width: 10,
length: 100,
strokeColor: [100, 100, 100],
color: [200, 200, 200]
})]
}, dojo.byId("gauge3"));
gauge.startup();
gauge = new dojox.gauges.AnalogGauge({
id: "gauge4",
startAngle: 20,
endAngle: 20,
background: 'white',
width: 200,
height: 200,
cx: 100,
cy: 100,
radius: 95,
ranges: [{
low: 0,
high: 8,
color: [50, 90, 102]
}],
majorTicks: {
offset: 70,
interval: 1,
length: 3,
color: 'white',
labelPlacement: 'outside'
},
indicators: [new dojox.gauges.AnalogCircleIndicator({
interactionMode: "gauge",
offset: 45,
value: 5,
length: 10,
strokeColor: [163, 43, 38],
color: [222, 161, 64]
}), new dojox.gauges.AnalogArcIndicator({
value: 7,
width: 10,
offset: 60,
color: [255, 248, 178],
noChange: true,
title: 'value',
hideValue: true
})]
}, dojo.byId("gauge4"));
gauge.startup();
}
</script>
</head>
<body class="tundra">
<h1>Analog Gauge Widget Indicators</h1>
<ul class="lst">
<li>
Arc and Text indicators
</li>
</ul>
<div id="gauge">
</div>
<ul class="lst">
<li>
Arc and Text indicators again.
</li>
</ul>
<div id="gauge2">
</div>
<ul class="lst">
<li>
Needle indicator.
</li>
</ul>
<div id="gauge3">
</div>
<ul class="lst">
<li>
Circle indicator.
</li>
</ul>
<div id="gauge4">
</div>
</div>
</body>
</html>