|
This sample demonstrates how to specify multiple linear gauge scales.
For detailed implementation, please take a look at the HTML code tab.
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Scales Example - HTML5 jQuery Linear Gauge Plugin by jqChart
</title>
<link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" />
<script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script>
<script lang="javascript" type="text/javascript">
var linearGradientRange = {
type: 'linearGradient',
x0: 0,
y0: 0,
x1: 0,
y1: 1,
colorStops: [{ offset: 0, color: '#FE642E' },
{ offset: 1, color: '#FFFF00'}]
};
var linearGradientBarMarker = {
type: 'linearGradient',
x0: 0,
y0: 0,
x1: 1,
y1: 0,
colorStops: [{ offset: 0, color: '#B2183E' },
{ offset: 0.42, color: '#FF3366' },
{ offset: 0.48, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
var radialGradient = {
type: 'radialGradient',
x0: 0.45,
y0: 0.45,
r0: 0.0,
x1: 0.45,
y1: 0.45,
r1: 1,
colorStops: [{ offset: 0, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
$(document).ready(function () {
$('#jqLinearGauge').jqLinearGauge({
orientation: 'vertical',
background: '#F7F7F7',
border: {
padding: 10,
lineWidth: 4,
strokeStyle: '#76786A'
},
tooltips: {
disabled: true,
highlighting: false
},
scales: [
{
margin: {
top: 6,
left: 0,
right: 0,
bottom: 26
},
minimum: -30,
maximum: 50,
interval: 10,
labels: {
offset: 0.20,
font: '14px sans-serif',
hAlign: 'right'
},
majorTickMarks: {
offset: 0.25,
length: 15,
interval: 5
},
minorTickMarks: {
visible: true,
interval: 1,
offset: 0.31
},
ranges: [
{
startValue: -30,
endValue: 50,
fillStyle: 'black',
innerOffset: 0.38,
outerStartOffset: 0.39,
outerEndOffset: 0.39
}
],
barMarkers: [
{
value: 18,
innerOffset: 0.39,
outerOffset: 0.58,
fillStyle: linearGradientBarMarker,
zIndex: 5
}
],
needles: [
{
type: 'ellipse',
fillStyle: radialGradient,
lineWidth: 1,
strokeStyle: 'black',
value: -33,
width: 34,
height: 34,
innerOffset: 0.335
}
]
},
{
minimum: -22,
maximum: 122,
interval: 20,
margin: {
top: 6,
left: 0,
right: 0,
bottom: 26
},
labels: {
offset: 0.78,
font: '14px sans-serif',
hAlign: 'left'
},
majorTickMarks: {
offset: 0.60,
length: 15,
interval: 10
},
minorTickMarks: {
visible: true,
interval: 2,
offset: 0.60
},
ranges:
[
{
startValue: -22,
endValue: 122,
fillStyle: 'black',
innerOffset: 0.58,
outerStartOffset: 0.59,
outerEndOffset: 0.59
}
]
}
]
});
});
</script>
</head>
<body>
<div>
<div id="jqLinearGauge" style="width: 150px; height: 400px;">
</div>
</div>
</body>
</html>
|
Follow us on Twitter