Html Gauge

Bind to the valueChanged event by type: jqxGauge. 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>
<br/>
<input type="button" id="jqxbutton" value="Change the value" />
<br/>
<div id="log"></div>

JavaScript

$('#gaugeContainer').jqxGauge({
     ranges: [{
         startValue: 0,
         endValue: 55,
         style: {
             fill: '#C9C9C9',
             stroke: '#C9C9C9'
         },
         endWidth: 5,
         startWidth: 1
     }, {
         startValue: 55,
         endValue: 110,
         style: {
             fill: '#FCF06A',
             stroke: '#FCF06A'
         },
         endWidth: 10,
         startWidth: 5
     }, {
         startValue: 110,
         endValue: 165,
         style: {
             fill: '#FCA76A',
             stroke: '#FCA76A'
         },
         endWidth: 15,
         startWidth: 10
     }, {
         startValue: 165,
         endValue: 220,
         style: {
             fill: '#FC6A6A',
             stroke: '#FC6A6A'
         },
         endWidth: 20,
         startWidth: 15
     }],
     ticksMinor: {
         interval: 5,
         size: '5%'
     },
     ticksMajor: {
         interval: 10,
         size: '9%'
     },
     value: 50,
     animationDuration: 1200
 });
 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 200,
     height: 30
 });
 $('#jqxbutton').click(function () {
     $('#gaugeContainer').jqxGauge('value', 220);
 });
 $('#gaugeContainer').on('valueChanged', function () {
     $("#log").html("The value is changed" );
 });