examples/ofthen-updates.html

<!doctype html>
<html>
<head>
    <title>Car assist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>body { padding: 0; margin: 0; background: #F0F0F0 }</style>
</head>

<body>
<p>
    <canvas id="hpa"></canvas>
    <canvas id="hpb"></canvas>
</p>

<script src="../gauge.min.js"></script>
<script>
    var myHighlightsHP = [
        { from: 0, to: 40, color: 'rgba(0,0,255,.8)'},
        { from: 400, to: 450, color: 'rgba(255,0,0,.8)'}
    ];
    var myMajorTicksHP = ['0', '100', '200', '300', '400', '450'];
    var myCommonProp = {
        width: 150,
        height: 150,
        value: 1,
        colorPlate: '#F0F0F0',
        colorMajorTicks: '#222',
        colorMinorTicks: '#222',
        colorTitle: '#222',
        colorUnits: '#222',
        colorNumbers: '#222',
        colorNeedle: 'rgba(240, 128, 128, 1)',
        colorNeedleEnd: 'rgba(255, 160, 122, .9)',
        valueBox: false
    };

    var myAnimation = {
        animationRule: 'decycle',
        animationDuration: 500
    };

    var myCommonPropHP=Object.assign({},
        myCommonProp,
        myAnimation,
        {
            units:'BAR',
            minValue:0, maxValue:450,
            majorTicks:myMajorTicksHP,
            highlights:myHighlightsHP
        }
    );

    var hpaConfig = Object.assign({},
        { renderTo: 'hpa', title: 'HPA' },
        myCommonPropHP
    );
    var hpbConfig = Object.assign({},
        { renderTo: 'hpb', title: 'HPB' },
        myCommonPropHP
    );
    var gaugeHpa = new RadialGauge(hpaConfig);
    var gaugeHpb = new RadialGauge(hpbConfig);

    function onRender() {
        console.log(this._value, this.value);
    }

    gaugeHpa.on('render', onRender);
    gaugeHpb.on('render', onRender);

    gaugeHpa.draw();
    gaugeHpb.draw();

    setInterval(function() {
        gaugeHpa.value = 0;
        gaugeHpb.value = 0;
    }, 50);
</script>

</body>
</html>