jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
115 lines (102 loc) • 5.65 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Gauge DefaultFunctionality</title>
<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" />
<meta name="description" content="This is and example of Custom Elements Gauge with an indicator within a range of values." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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="../../../scripts/demos.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: linear-gradient(#fafafa, #f3f3f3);
-webkit-border-radius: 3px;
-moz-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;
position: absolute;
top: 290px;
left: 140px;
font-family: Sans-Serif;
text-align: center;
font-size: 17px;
}
</style>
<script type="text/javascript">
JQXElements.settings['gaugeSettings'] =
{
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
}
JQXElements.settings["vericalGaugeSettings"] =
{
orientation: 'vertical',
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: (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
}
window.onload = function() {
var myGauge = document.querySelector('jqx-gauge');
var myGaugeValue = document.querySelector('#gaugeValue');
var myLinearGauge = document.querySelector('jqx-linear-gauge');
myGauge.addEventListener('valueChanging', e => {
myGaugeValue.innerHTML = Math.round(e.args.value) + 'kph';
});
myGauge.value = 140;
}
</script>
</head>
<body>
<div class="example-description">
Custom elements Gauge displays an indicator within a range of values. Custom element 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.
</div>
<div id="demoWidget" style="position: relative;">
<jqx-gauge style="float: left;" settings="gaugeSettings"></jqx-gauge>
<div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
<jqx-linear-gauge settings="vericalGaugeSettings" style="margin-left: 60px; float: left;"></jqx-linear-gauge>
</div>
</body>
</html>