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