341 lines
8.2 KiB
HTML
341 lines
8.2 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Bar Gauge Widget</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.BarGauge');
|
|
dojo.require('dojox.gauges.BarIndicator');
|
|
dojo.require('dijit.form.Button');
|
|
dojo.require('dojo.parser');
|
|
|
|
|
|
dojo.addOnLoad(init);
|
|
|
|
var gauge, valueIndicator, targetIndicator, handle;
|
|
var ranges1 = [ {low:5, high:10, hover:'5 - 10'},
|
|
{low:10, high:20, hover:'10 - 20'},
|
|
{low:20, high:30, hover:'20 - 30'},
|
|
{low:30, high:40, hover:'30 - 40'},
|
|
{low:40, high:50, hover:'40 - 50'},
|
|
{low:50, high:60, hover:'50 - 60'},
|
|
{low:60, high:70, hover:'60 - 70'},
|
|
{low:70, high:75, hover:'70 - 75'}
|
|
];
|
|
var ranges2 = [ {low:5, high:10, hover:'5 - 10'},
|
|
{low:10, high:20, hover:'10 - 20'},
|
|
{low:20, high:30, hover:'20 - 30'},
|
|
{low:30, high:40, hover:'30 - 40'},
|
|
{low:40, high:50, hover:'40 - 50'},
|
|
{low:50, high:60, hover:'50 - 60'},
|
|
{low:60, high:70, hover:'60 - 70'},
|
|
{low:70, high:75, hover:'70 - 75'}
|
|
];
|
|
|
|
function init() {
|
|
gauge = dojo.byId("defaultGauge");
|
|
gauge = new dojox.gauges.BarGauge({
|
|
id: "defaultGauge",
|
|
width: 300,
|
|
height: 55,
|
|
dataHeight: 25,
|
|
dataWidth: 275,
|
|
dataY: 25,
|
|
dataX: 10,
|
|
ranges: ranges1,
|
|
majorTicks: {
|
|
length: 5,
|
|
width: 1,
|
|
offset: -5,
|
|
interval: 5
|
|
},
|
|
indicators: [
|
|
new dojox.gauges.BarIndicator({
|
|
value:17,
|
|
width: 7,
|
|
hover:'Value: 17',
|
|
title: 'Value'
|
|
}),
|
|
new dojox.gauges.BarLineIndicator({
|
|
value:6,
|
|
color:'#D00000',
|
|
hover:'Target: 6',
|
|
title: 'Target'
|
|
})
|
|
]
|
|
}, gauge);
|
|
gauge.startup();
|
|
|
|
var fill = {
|
|
type: "linear",
|
|
x1: 0,
|
|
y1: gauge.height,
|
|
x2: 0,
|
|
y2: 0,
|
|
colors: [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
|
|
};
|
|
gauge = dojo.byId("programmaticGauge");
|
|
gauge = new dojox.gauges.BarGauge({
|
|
id: "programmaticGauge",
|
|
width: 300,
|
|
height: 55,
|
|
dataHeight: 25,
|
|
dataWidth: 275,
|
|
dataX: 10,
|
|
dataY: 25,
|
|
useRangeStyles: 8,
|
|
background: fill
|
|
}, gauge);
|
|
gauge.startup();
|
|
|
|
gauge.addRanges(ranges2);
|
|
gauge.setMinorTicks({interval: 1,
|
|
length:2,
|
|
offset:-2,
|
|
width: 1});
|
|
gauge.setMajorTicks({interval: 5,
|
|
length:5,
|
|
offset:-5,
|
|
width: 1,
|
|
font: {family: "Arial", style: "italic", variant: 'small-caps', weight: 'bold', size: "12px"}});
|
|
valueIndicator = new dojox.gauges.BarIndicator({
|
|
value:17,
|
|
width: 7,
|
|
hover:'Value: 17',
|
|
title: 'Value',
|
|
easing: dojo.fx.easing.bounceOut
|
|
});
|
|
targetIndicator = new dojox.gauges.BarLineIndicator({
|
|
value:6,
|
|
color:'#D00000',
|
|
hover:'Target: 6',
|
|
title: 'Target',
|
|
// Can use string to indicate easing function (just like in declarative)
|
|
easing: 'dojo.fx.easing.linear'
|
|
});
|
|
gauge.addIndicator(targetIndicator);
|
|
gauge.addIndicator(valueIndicator);
|
|
//targetIndicator.update(Math.floor(Math.random() * 70) + 5);
|
|
handle = setInterval((function(t, v){
|
|
return (function(){
|
|
t.update(Math.floor(Math.random() * 70) + 5);
|
|
v.update(Math.floor(Math.random() * 70) + 5);
|
|
});
|
|
})(valueIndicator, targetIndicator), 3000);
|
|
dojo.connect(dijit.byId('stop'), 'onClick', function(){
|
|
clearInterval(handle);
|
|
});
|
|
}
|
|
dojo.addOnUnload(function(){
|
|
clearInterval(handle);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<h1>Bar Gauge Widget</h1>
|
|
<h2>Default Colored Gauge</h2>
|
|
<div id="defaultGauge"></div>
|
|
<h2>CSS Themed Ranges, Gradient Background, Updating to Random Values on 3s Timer</h2>
|
|
<div id="programmaticGauge"></div>
|
|
<button dojoType="dijit.form.Button" id="stop">Stop Timer</button>
|
|
<h2>Declarative, Gradient Ranges, Gradient Background, No Indicator Boxes</h2>
|
|
<div dojoType="dojox.gauges.BarGauge"
|
|
id="declarativeGauge"
|
|
width="300"
|
|
height="55"
|
|
dataHeight="25"
|
|
dataWidth="275"
|
|
dataX="10"
|
|
dataY="25"
|
|
useRangeStyles="0"
|
|
hideValues="true"
|
|
majorTicks="{length: 5, width: 1, offset: -5, interval: 5}"
|
|
background="{
|
|
type: 'linear',
|
|
x1: 0,
|
|
x2: 0,
|
|
y1: 55,
|
|
y2: 0,
|
|
colors: [{offset: 0, color: '#ECECEC'}, {offset: 1, color: 'white'}]
|
|
}">
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="5"
|
|
high="10"
|
|
hover="5 - 10"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#606060'}, {offset: 1, color: '#707070'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range1"
|
|
low="10"
|
|
high="20"
|
|
hover="10 - 20"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#707070'}, {offset: 1, color: '#808080'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range2"
|
|
low="20"
|
|
high="30"
|
|
hover="20 - 30"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#808080'}, {offset: 1, color: '#909090'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range3"
|
|
low="30"
|
|
high="40"
|
|
hover="30 - 40"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#909090'}, {offset: 1, color: '#A0A0A0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range4"
|
|
low="40"
|
|
high="50"
|
|
hover="40 - 50"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#A0A0A0'}, {offset: 1, color: '#B0B0B0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range5"
|
|
low="50"
|
|
high="60"
|
|
hover="50 - 60"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#B0B0B0'}, {offset: 1, color: '#C0C0C0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range6"
|
|
low="60"
|
|
high="70"
|
|
hover="60 - 70"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#C0C0C0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range7"
|
|
low="70"
|
|
high="75"
|
|
hover="70 - 75"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.BarLineIndicator"
|
|
id="target"
|
|
value="6"
|
|
color="#D00000"
|
|
width="3"
|
|
hover="Target: 6"
|
|
title="Target">
|
|
</div>
|
|
<div dojoType="dojox.gauges.BarIndicator"
|
|
id="value"
|
|
value="17"
|
|
length="135"
|
|
width="3"
|
|
hover="Value: 17"
|
|
title="Value">
|
|
</div>
|
|
</div>
|
|
<h2>Declarative, (Ugly) Colored Ranges, No Numbers, No Indicator Boxes</h2>
|
|
<div dojoType="dojox.gauges.BarGauge"
|
|
id="declarativeGauge2"
|
|
width="300"
|
|
height="35"
|
|
dataHeight="25"
|
|
dataWidth="290"
|
|
useRangeStyles="0"
|
|
hideValues="true"
|
|
background="{color: 'green'}">
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="5"
|
|
high="10"
|
|
hover="5 - 10"
|
|
color="{color: 'red'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="10"
|
|
high="20"
|
|
hover="10 - 20"
|
|
color="{color: '#FFA500'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="20"
|
|
high="30"
|
|
hover="20 - 30"
|
|
color="{color: 'yellow'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="30"
|
|
high="40"
|
|
hover="30 - 40"
|
|
color="{color: '#7FFF00'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="40"
|
|
high="50"
|
|
hover="40 - 50"
|
|
color="{color: '#00FFFF'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="50"
|
|
high="60"
|
|
hover="50 - 60"
|
|
color="{color: 'blue'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="60"
|
|
high="70"
|
|
hover="60 - 70"
|
|
color="{color: '#191970'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="70"
|
|
high="75"
|
|
hover="70 - 75"
|
|
color="{color: 'purple'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.BarLineIndicator"
|
|
value="6"
|
|
color="#D00000"
|
|
hover="Target: 6"
|
|
title="Target">
|
|
</div>
|
|
<div dojoType="dojox.gauges.BarIndicator"
|
|
value="55"
|
|
width="7"
|
|
hover="Value: 55"
|
|
title="Value">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|