jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
62 lines (59 loc) • 3.11 kB
HTML
<html lang="en">
<head>
<title id='Description'>Linear Gauge</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="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.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/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#gauge').jqxLinearGauge({
orientation: 'vertical',
width: 100,
height: 300,
ticksMajor: { size: '10%', interval: 10 },
ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
max: 60,
pointer: { size: '5%' },
colorScheme: 'scheme05',
labels: { interval: 20, formatValue: function (value, position) {
if (position === 'far') {
value = (9 / 5) * value + 32;
if (value === -76) {
return '°F';
}
return value + '°';
}
if (value === -60) {
return '°C';
}
return value + '°';
}
},
ranges: [
{ startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
{ startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
{ startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}],
animationDuration: 1500
});
$('#gauge').jqxLinearGauge('value', 40);
});
</script>
</head>
<body class='default'>
<div id="gauge"></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>