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.
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
Here is my javacript
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 !