jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
90 lines (85 loc) • 4.75 kB
HTML
<html lang="en">
<head>
<title>jQWidgets Gauge - Mobile Example</title>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.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="../simulator.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = prepareSimulator("gauge");
$('#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: 10, size: '5%' },
ticksMajor: { interval: 20, size: '9%' },
value: 0,
colorScheme: 'scheme05',
animationDuration: 1200,
width: '50%',
height: '100%'
});
$('#gaugeContainer').on('valueChanging', function (e) {
$('#gaugeValue').text(Math.round(e.args.value) + ' kph');
});
$('#gaugeContainer').jqxGauge('value', 140);
$('#linearGauge').jqxLinearGauge({
orientation: 'vertical',
width: '20%',
height: '80%',
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);
initSimulator("gauge");
});
</script>
</head>
<body style="background: white;">
<div id="demoContainer" class="device-mobile-tablet">
<div id="container" class="device-mobile-tablet-container">
<div style="overflow: hidden; width: 100%; height: 100%;">
<div style="font-size: 13px; margin: 5%; float: left;" id="gaugeContainer"></div>
<div style="font-size: 13px; margin: 5%; float: right;" id="linearGauge"></div>
</div>
</div>
</div>
</body>
</html>