jQWidgets Mobile Demos

Show Demo List
Theme:
Demo
View Source
API Reference
<!DOCTYPE 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>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</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>
jQWidgets Mobile Demos

Web UI Widgets
