You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
7.9 KiB
340 lines
7.9 KiB
<!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>
|
|
|