JavaScript - Multiple Dynamic variables - canvas rendering

Question

I'm trying to create multiple gauges but seem to have trouble. If I don't create a var for each gauge then they don't render. How do I create multiple dynamic variables?

I'm able to create the elements but am struggling to set the val/render the gauges.

for (idx = 0; idx < chartdata.length; idx += 1) {
    var opts = {
        angle: 0.15, // The span of the gauge arc
        lineWidth: 0.44, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: {
            length: 0.6, // // Relative to gauge radius
            strokeWidth: 0.035, // The thickness
            color: '#000000' // Fill color
        },
        limitMax: false, // If false, max value increases automatically if value > maxValue
        limitMin: false, // If true, the min value of the gauge will be fixed
        colorStart: '#6FADCF', // Colors
        colorStop: '#8FC0DA', // just experiment with them
        strokeColor: '#E0E0E0'
    };
    var divId = "_gauge" + idx;
    var div = document.getElementById('js_chart');
    div.innerHTML += '<canvas id="' + divId + '" style="float:left"></canvas>';
        
}

but if I try methods of creating the varibles in an array or window["gauage" +idx ] they do not.

When adding the below to the For Loop these method only result in the final gauge showing.

window["guage" + idx] = new Gauge(document.getElementById(divId)).setOptions(opts);
window["guage" + idx].set(1) ;

or

var colletion =[]
collection["guage" + idx] = new Gauge(document.getElementById(divId)).setOptions(opts);
collection[idx].set(1)

If I run a function after the loop of :

function DrawStuff(opts){
    
var target = document.getElementById("_gauge1"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1244); // set actual value

var target2 = document.getElementById("_gauge2"); // your canvas element
var gauge2 = new Gauge(target2).setOptions(opts); // create sexy gauge!
gauge2.maxValue = 3000; // set max gauge value
gauge2.animationSpeed = 32; // set animation speed (32 is default value)
gauge2.set(124); // set actual value
    }

The gauges do render. How can I get the same affect of DrawStuff() but with creating the var dynamically as the number of gauges can change?

*I'm usng https://bernii.github.io/gauge.js/

Anton · Accepted Answer · 2020-09-18 15:43:21Z

The idea is to keep gauges and their options in some array outside of the functions (yes, we can append this to window, but I do not like this).

Working example:

const gaugeDefaultOptions = {
  angle: 0.15, // The span of the gauge arc
  lineWidth: 0.44, // The line thickness
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.035, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false, // If false, max value increases automatically if value > maxValue
  limitMin: false, // If true, the min value of the gauge will be fixed
  colorStart: '#6FADCF', // Colors
  colorStop: '#8FC0DA', // just experiment with them
  strokeColor: '#E0E0E0'
};

const chartdata = new Array(5); // <--- TEST
const gauges = []; // gauges will be here
const gaugeOptions = []; // keep gauge options

function prepareGauges() {
  const mainDiv = document.getElementById('js_chart');
  for (idx = 0; idx < chartdata.length; idx += 1) {
    const opts = {
      ...gaugeDefaultOptions, // copy default options
      // here we can change some options
    };
    const canvas = document.createElement('canvas');
    canvas.id = "_gauge" + idx;
    mainDiv.appendChild(canvas);
    gaugeOptions.push({
      opts,
      canvas
    });
  }
}

function buildGauges() {
  for (let options of gaugeOptions) {
    const gauge = new Gauge(options.canvas).setOptions(options.opts);
    gauges.push(gauge);
  }
}

function updateGauges() {
  for (let gauge of gauges) {
    gauge.maxValue = 3000; // set max gauge value
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(Math.random() * gauge.maxValue | 0); // set actual value
  }
}

prepareGauges();
buildGauges();
updateGauges();

canvas {
  float: left;
  width: 100px;
  background: #EEE;
  margin: 2px;
}

<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>

<div id="js_chart"></div>
<div><button onclick="updateGauges()">Make some fun</button></div>

Thank you , let me try and implement this. I'm eventually wanting to take data from the chartdata and put in the opts and the set() for the value.

Collectives™ on Stack Overflow

JavaScript - Multiple Dynamic variables - canvas rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related