jQuery LinearGauge

Set the colorScheme 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({
    colorScheme:'scheme06',
    value: 50,
    max: 70,
    min: 0,
    pointer: {
        size: '5%'
    },
    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'
        }
    }]
});