javascriptjustgage

Trying to pass in an array to justGage


I'm using JustGage Javascript Plugin to create a dynamic gauge. I want to pass in an array to this gauge and have it display those values. So far, I'm only able to get it to display random integers using getRandomInt().

Here's the relevant js part of the code:

<script src="justgage-1.2.2/justgage.js"></script>
<script src="justgage-1.2.2/raphael-2.1.4.min.js"></script>
<script>

document.addEventListener("DOMContentLoaded", function(event) {

        var g1 = new JustGage({
            id: 'g1',
            value: getRandomInt(0, 100),
            min: 0,
            max: 100,
            pointer: true,
            gaugeWidthScale: 0.6,
            customSectors: [{
                color: '#ff0000',
                lo: 50,
                hi: 100
            }, {
                color: '#00ff00',
                lo: 0,
                hi: 50
            }],
            counter: true
        });

        setInterval(function() {
            g1.refresh(getRandomInt(0, 100));
        }, 2000)
    });
    </script>

I'm wondering why something like

var num= [1,2,3,4,5,6,7,8,9];

var i = 0; 

setInterval(function() {

          document.innerHTML = num[i++]; 
          if (i == num.length) i = 0; 
                 }, 1000);

Can't be used instead of the getRandomInt() function.

Since this can't be seen on jfiddle or codepen, here's the plugin's site that shows some demo charts: http://justgage.com/ Instead of having to hit a refresh button, it refreshes on it's own.

Thought it would be more productive to ask here while I still try to work things out too.


Solution

  • Man that plugin has lousy docs...

    Seems like you're not far off with what you want to do - in your setInterval you're going to want to do something like this, with the key part being the g1.refresh(val) with the new value of your gauge.

    var i = 0,
        num = [1,2,3,4,5,6,7,8,9];
    
    setInterval(function() {
        if (i >= num.length) i = 0;
        g1.refresh(num[i++]);
    }, 2000);