Html LinearGauge

Set the pointer property of the jqxLinearGauge Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="gaugeContainer"></div>

JavaScript

$('#gaugeContainer').jqxLinearGauge({
    pointer: {
        pointerType: 'arrow',
        size: '5%',
        visible: true,
        offset: 10
    },
    max: 70,
    min: 0,
    colorScheme: 'scheme02',
    ticksMajor: {
        size: '10%',
        interval: 10
    },
    ticksMinor: {
        size: '5%',
        interval: 2.5,
        style: {
            'stroke-width': 1,
            stroke: '#aaaaaa'
        }
    },
    ranges: [{
        startValue: 20,
        endValue: 45,
        style: {
            fill: '#FFA200',
            stroke: '#FFA200'
        }
    }, {
        startValue: 45,
        endValue: 70,
        style: {
            fill: '#FF4800',
            stroke: '#FF4800'
        }
    }],
    value:50
});
$('#gaugeContainer').val(50);