can't set proper pointer value and max value with multiple gauges
Aydin-ab opened this issue · 0 comments
Aydin-ab commented
Hello, I have a weird issue using this library
I want to display 3 gauges that I've put in a row
Next to these 3 gauges I want to display the current value in its unit.
Here is my HTML. It's just a row of 3 gauges + a call to a script function
<div class="Row">
<div class="Column">
<div class="center">
<canvas id="gauge1" class="gauge"></canvas>
<div id="current_value1" class="current_value"></div>
</div>
</div>
<div class="Column">
<div class="center">
<canvas id="gauge2" class="gauge"></canvas>
<div id="current_value2" class="current_value"></div>
</div>
</div>
<div class="Column">
<div class="center">
<canvas id="gauge3" class="gauge"></canvas>
<div id="current_value3" class="current_value"></div>
</div>
</div>
</div>
<script>
init_gauge(data['gauge1']);
init_gauge(data['gauge2']);
init_gauge(data['gauge3']);
</script>
Here is my javacript
function init_gauge(data){
opts = { }
let target = document.querySelector('#gauge_' + data['name']) // your canvas element
let gaugeChart = new Gauge(target).setOptions(opts) // create sexy gauge!
gaugeChart.max_value = data['max_value'] // set max gauge value
gaugeChart.setMinValue(0) // Prefer setter over gauge.minValue = 0
gaugeChart.animationSpeed = 32 // set animation speed (32 is default value)
gaugeChart.set(data['current_value']) // set actual value
document.getElementById("current_value" + data['id']).className = "current_value" + data['id'];
var textRenderer = new TextRenderer(document.getElementById("current_value" + data['id']))
textRenderer.render = function(gauge){
this.el.innerHTML = (gauge.displayedValue).toFixed(0) + " " + data["unit"]
};
gaugeChart.setTextField(textRenderer);
}
As you can see, my options are empty, I just want to create 3 gauges, set their respective current value and max value and print it in the text renderer. However, I have a weird behaviour where the gauges don't seem to scale with the max_value : If I put a max_value of 30 000 and set value to 6000 then the pointer goes all the way to the end.
Here is a fiddle
https://jsfiddle.net/gjcxsq9e/4/
Thanks a lot !