Donut works, Gauge doesn't

RokPot commented 5 years ago

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"));

dhunt84971 commented 5 years ago

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"));

kplindegaard commented 5 years ago

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?

bernii / gauge.js

Donut works, Gauge doesn't #197