canvas-gauges: 2 gauges, one increasing values and another one decreasing values

user_18720337 0
Viewed 107

i am using Canvas-gauge from here canvas-gauges.com. I want to display 2 gauges. First one (gauge1) with decreasing values (from 100 to 0) and second one (gauge2) with increasing values (from 0 to 100). My problem is that both gauges are rendered the same (both decreasing or increasing). How can i seperate and attach different values to each gauge?

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>έκδοση_4</title>
    <script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
    </head>
<style type="text/css">
canvas {
    border:1px solid red;
    background: blue;
    }
    body {
        margin: 0;
    }
</style>
</head>
<body>
    <body onload='animateGauges()'>
<button onclick="stopGaugesAnimation()">stop counting</button>


<hr>
<canvas id="gauge1" data-type="linear-gauge"></canvas>
<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

var timers = [];
var value=100;
var increment=5;
function animateGauges() {
    document.gauges.forEach(function(gauge) {
        timers.push(setInterval(function() {
            gauge.value =( value -= increment);
            if (value <10) { stopGaugesAnimation();
                }}, gauge.animation.duration + 50));

    });
}

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}
</script>
<canvas id="gauge2" data-type="radial-gauge"></canvas>
<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

var timers = [];
var value2=10;
var increment2=7;
function animateGauges() {
    document.gauges.forEach(function(gauge) {
        timers.push(setInterval(function() {
            gauge.value =( value2 += increment2);
            if (value2 >93) { stopGaugesAnimation();
                }}, gauge.animation.duration + 50));

    });
}

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}
</script>
</body>
</html>

canvas
1 Answers

You have not used any of the configuration options:
https://canvas-gauges.com/documentation/user-guide/configuration
You should start reading that documentation, and getting familiar with the options available

Now to your question. If I understood correctly you are trying to decrease one and increase the other. My approach to that is to set something unique on the gauge that we can use to identify and determine if we should increase or decrease.

In this example I'm using the gauge width, if it is 200 we decrease by 3 if not we increase by 5.

var timers = []

function animateGauges() {
  document.gauges.forEach(function(gauge) {
    timers.push(setInterval(function() {      
      if (gauge.options.width == 200) {
        gauge.value -= 3
      } else {
        gauge.value += 5
      }
      
      if (gauge.value > 93) {
        timers.forEach(clearInterval)
      }
    }, gauge.animation.duration + 50))
  });
}
<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>

<body onload='animateGauges()'>
  <canvas id="gauge2" data-type="radial-gauge" data-width="200" data-value="80"></canvas>
  <canvas id="gauge1" data-type="linear-gauge" data-width="100" ></canvas>
</body>

user_75998330
Related