Donut works, Gauge doesn't
Closed this issue · 2 comments
I have a sample code. And it only draws on canvas if I write new Donut(target)
. If I write Gauge the canvas is blank.
var opts = { lines: 12, angle: 0.15, lineWidth: 0.44, pointer: { length: 0.9, strokeWidth: 0.035, color: '#000000' }, limitMax: 'false', percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]], // !!!! strokeColor: '#E0E0E0', generateGradient: true }; var target = document.getElementById('canvas-preview'); // your canvas element var gauge = new Donut(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 100; // set max gauge value gauge.animationSpeed = 32; // set animation speed (32 is default value) gauge.set(35); // set actual value gauge.setTextField(document.getElementById("preview-textfield"));
I'm not sure if this will help, but here is the full code I tried that produces the following result using FireFox 63.0.3:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
</head>
<body>
<div class='container'>
<canvas id='canvas-preview'></canvas>
<div id="preview-textfield">###</div>
</div>
<script src="import/gauge.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
var opts = {
lines: 12,
angle: 0.15,
lineWidth: 0.44,
pointer: {
length: 0.9,
strokeWidth: 0.035,
color: '#000000'
},
limitMax: 'false',
percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]], // !!!!
strokeColor: '#E0E0E0', generateGradient: true
};
var target = document.getElementById('canvas-preview'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(35); // set actual value
gauge.setTextField(document.getElementById("preview-textfield"));
It's BTW usually a good idea to call gauge.set(...) as the last thing you do.
@RokPot I'm closing this, because as @dhunt84971 explains, your sample does work even though I suspect that the options parameters is not taken from any of the most recent versions...? You're using v1.3.6 of gauge.min.js I hope?