jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
116 lines (109 loc) • 6.43 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Gauge, Gauge Widget, Radial Gauge" />
<meta name="description" content="Using the toolbox in the right hand side of the jqxGauge you can easy switch through different properties which are changing gauge's appearance." />
<title id='Description'>This sample demonstrates the basic Gauge settings.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var labels = { visible: true, position: 'inside' };
//Create jqxGauge
$('#gauge').jqxGauge({
ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
{ startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
],
cap: { radius: 0.04 },
caption: { offset: [0, -25], value: 'jQWidgets', position: 'bottom' },
value: 0,
style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' },
animationDuration: 1500,
colorScheme: 'scheme04',
labels: labels,
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '10%' }
});
//Initialize the Settings panel.
$('#expander').jqxExpander({ toggleMode: 'none', showArrow: false, width: 200});
$('#insideRadio').jqxRadioButton({ width: 150, checked: true});
$('#outsideRadio').jqxRadioButton({ width: 150});
$('#showLabelsCheckbox').jqxCheckBox({ width: 150, checked: true});
$('#showRangesCheckbox').jqxCheckBox({ width: 150, checked: true});
$('#showBorderCheckbox').jqxCheckBox({ width: 150, checked: true});
//Binding to the widgets's events
$('#showLabelsCheckbox').on('change', function (e) {
labels.visible = e.args.checked;
$('#gauge').jqxGauge('labels', labels);
});
$('#showRangesCheckbox').on('change', function (e) {
$('#gauge').jqxGauge('showRanges', e.args.checked);
});
$('#showBorderCheckbox').on('change', function (e) {
$('#gauge').jqxGauge('border', { visible: e.args.checked });
});
$('#outsideRadio').on('change', function (e) {
if (e.args.checked) {
labels.position = 'outside';
$('#gauge').jqxGauge('labels', labels);
}
});
$('#insideRadio').on('change', function (e) {
if (e.args.checked) {
labels.position = 'inside';
$('#gauge').jqxGauge('labels', labels);
}
});
// set gauge's value.
$('#gauge').jqxGauge('setValue', 220);
});
</script>
</head>
<body class='default'>
<div class="demo-gauge" style="width: 600px;">
<div id="gauge" style="float: left;"></div>
<div id="expander" style="float: right;">
<div>
Options
</div>
<div>
<ul style="list-style: none; padding: 0px; margin: 10px;">
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showLabelsCheckbox">Show labels</div>
<ul style="list-style: none; padding: 0px; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px;">
<li>
<div id="insideRadio">Inside the gauge</div>
</li>
<li>
<div style="margin-top: 5px;" id="outsideRadio">Outside the gauge</div>
</li>
</ul>
</li>
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showRangesCheckbox">Show ranges</div>
</li>
<li style="padding: 3px; font-family: Verdana; font-size: 12px;">
<div id="showBorderCheckbox">Show border</div>
</li>
</ul>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>