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.
341 lines (334 loc) • 8.09 kB
HTML
<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>