jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
101 lines (95 loc) • 5.42 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Gauge, Gauge, Radial Gauge, jqxGauge" />
<meta name="description" content="In the following demo you can see how you can cuztomize jqxGauge's ranges. You can set range's start and end width, start and end distance from the gauge's bundaries and custom style." />
<title id='Description'>jqxGauge displays an indicator within a range of values. Gauges
can be used in a table or matrix to show the relative value of a field in a range
of values in the data region, for example, as a KPI</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/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgauge.js"></script>
<style type="text/css">
#gaugeValue {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3));
background-image: -webkit-linear-gradient(#fafafa, #f3f3f3);
background-image: -moz-linear-gradient(#fafafa, #f3f3f3);
background-image: -o-linear-gradient(#fafafa, #f3f3f3);
background-image: -ms-linear-gradient(#fafafa, #f3f3f3);
background-image: linear-gradient(#fafafa, #f3f3f3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#gaugeContainer').jqxGauge({
ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
{ startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
{ startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
{ startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '9%' },
value: 0,
colorScheme: 'scheme05',
animationDuration: 1200
});
$('#gaugeContainer').on('valueChanging', function (e) {
$('#gaugeValue').text(Math.round(e.args.value) + ' kph');
});
$('#gaugeContainer').jqxGauge('value', 140);
$('#linearGauge').jqxLinearGauge({
orientation: 'vertical',
width: 100,
height: 350,
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
});
$('#linearGauge').jqxLinearGauge('value', 40);
});
</script>
</head>
<body style="background:white;">
<div id="demoWidget" style="position: relative;">
<div style="float: left;" id="gaugeContainer"></div>
<div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
<div style="margin-left: 60px; float: left;" id="linearGauge"></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>