|
This sample demonstrates how to specify annotations for linear gauge.
For detailed implementation, please take a look at the HTML code tab.
<!DOCTYPE html>
<html>
<head>
<title>
Annotations 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">
$(document).ready(function () {
var gradient1 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#C5F80B' },
{ offset: 1, color: '#6B8901'}]
};
var gradient2 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
var gradient3 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#339CFF' },
{ offset: 1, color: '#1F66A8'}]
};
var needleGradient = {
type: 'linearGradient',
x0: 0,
y0: 0.5,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#4F6169' },
{ offset: 1, color: '#252E32'}]
};
$('#jqLinearGauge').jqLinearGauge({
orientation: 'horizontal',
background: '#F7F7F7',
border: {
padding: 10,
lineWidth: 4,
strokeStyle: '#76786A'
},
annotations: [
{
text: 'Optimal zone',
font: '12px sans-serif',
horizontalOffset: 0.2,
verticalOffset: 0.8,
fillStyle: '#6B8901'
},
{
text: 'Critical zone',
font: '12px sans-serif',
horizontalOffset: 0.55,
verticalOffset: 0.8,
fillStyle: '#B2183E'
}
],
tooltips: {
disabled: false,
highlighting: true
},
animation: {
duration: 1
},
scales: [
{
minimum: 0,
maximum: 100,
labels: {
offset: 0.16
},
majorTickMarks: {
length: 10,
offset: 0.28,
lineWidth: 2
},
minorTickMarks: {
length: 6,
visible: true,
interval: 2,
offset: 0.32,
lineWidth: 2
},
ranges: [
{
startValue: 0,
endValue: 40,
innerOffset: 0.46,
outerStartOffset: 0.64,
outerEndOffset: 0.75,
fillStyle: gradient1
},
{
startValue: 40,
endValue: 70,
innerOffset: 0.46,
outerStartOffset: 0.75,
outerEndOffset: 0.84,
fillStyle: gradient2
},
{
startValue: 70,
endValue: 100,
innerOffset: 0.46,
outerStartOffset: 0.84,
outerEndOffset: 0.90,
fillStyle: gradient3
}
],
needles: [
{
type: 'pointer',
value: 80,
fillStyle: needleGradient,
innerOffset: 0.50,
outerOffset: 1.00
}
]
}
]
});
$('#jqLinearGauge').bind('tooltipFormat', function (e, data) {
var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />';
switch (data.elementType) {
case 'needle':
tooltip += 'Value: ' + data.value;
break;
case 'range':
tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
}
return tooltip;
});
});
</script>
</head>
<body>
<div>
<div id="jqLinearGauge" style="width: 400px; height: 100px;">
</div>
</div>
</body>
</html>
|
Follow us on Twitter