custom gauge from calc value (7.0+)

html:
calculated value:
<span id=calcValue><SpotfireControl id="SpotfireCalculatedValue" />
</span>

<HR>

<DIV style="WIDTH: 400px; HEIGHT: 320px" id=gauge></DIV>


js
 resource=[
 "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
 "//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]

//add scripts to head
$.getScript(resource[0],function(){
 $.getScript(resource[1],init)
})

init = function(){
  var g = new JustGage({
    id: "gauge", 
    value: "22", 
    min: 0,
    max: 100,
    title: "Visitors"
  });  

  //refresh gauge when calcvalue changes
  $(calcValue).one('DOMSubtreeModified',function(){
    g.refresh($(this).text())
  })
}



Multiple gauges example:




html
<table>
 <tr>
  <tr>
   <td>
<span id=calcValue1>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge1></DIV>
   </td>
   <td>
<span id=calcValue2>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge2></DIV>
   </td>
   <td>
<span id=calcValue3>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge3></DIV>
   </td>
  </tr>
</table>

js
////////////////////////////////justgauge
resource=[
 "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
 "//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]

//add scripts to head
$.getScript(resource[0],function(){
 $.getScript(resource[1],init)
})



////////////////////////////////gauge 1
init = function(){
  var g = new JustGage({
    id: "gauge1", 
    value: "11", 
    min: 0,
    max: 100,
    title: "Water"
  });  

  //refresh gauge when calcvalue changes
  $(calcValue1).one('DOMSubtreeModified',function(){
    g.refresh($(this).text())
  })

////////////////////////////////gauge 2
  
    var g = new JustGage({
    id: "gauge2", 
    value: "22", 
    min: 0,
    max: 100,
    title: "Oil"
  });  

  //refresh gauge when calcvalue changes
  $(calcValue2).one('DOMSubtreeModified',function(){
    g.refresh($(this).text())
  })

  
////////////////////////////////gauge 3
  
    var g = new JustGage({
    id: "gauge3", 
    value: "33", 
    min: 0,
    max: 100,
    title: "Gas"
  });  

//refresh gauge when calcvalue changes
$(calcValue3).one('DOMSubtreeModified',function(){
g.refresh($(this).text())
})

}

12 comments:

Gareth Robins said...

Don't forget to add a function that redraws when the browser size changes. Text areas don't autoscale

Kiruba Sankar Vasudevan said...

Is there a way to configure the max as green color and min as red? Just trying to make it look like a progress bar

Jose Leviaguirre said...

Here is a quick way to change colors gradualy from red-yellow-green. Just put this line before the gauge is created:

var percentColors = [
"#ff0000", //red util 33%
"#ffff00", //yellow at 66%
"#00ff00" //green above 66%
]

here is an example: http://jsfiddle.net/mce1ywef/

Please refer to the gauge documentation (source code 'configurable parameters' section) to customize gauge.

Source code: https://github.com/toorshia/justgage/blob/master/justgage.js#L129
Main site: http://justgage.com/

Keyur Parekh said...

How to change the scale to percentages? My data is in % how to tweak the script in this case?

Jose Leviaguirre said...

A quick way to do so is to put the units on the title or label. For example:

init = function(){
var g = new JustGage({
id: "gauge",
value: "22",
min: 0,
max: 100,
title: "Visitors (%)",
label: "% of visitors over last week"
});

Lucas Fontenelle said...
This comment has been removed by the author.
Rebecca Sellars said...

Is there a way to force the gauge to refresh on returning to a tab?

Whenever I change tabs the gauges don't redraw. I can set up individual "refresh" buttons, but when I have 15 gauges on a tab it is a pain for the user to have to click 15 separate buttons.

Jose Leviaguirre said...

Hello Rebecca,

Thanks for your comments. A way to do it is to trigger a javascript every time you click on a tab. There is a recent post about it here: http://spotfired.blogspot.com/2016/10/trigger-script-when-clicking-on-tab.html but this will execute an action script. If you want to trigger a javascript that refreshes the gauges, then take e a look at http://spotfired.blogspot.com/2015/01/trigger-javascript-when-changing-filters.html

I will work on a specific post to trigger javascript when clicking on a tab, but these post should give you a general idea. Hope this helps.

JLL

zarza5 said...

Jose,

What I have to change in HTML to get my guage in one line, next to each other? Not under like is in example.

Jose Leviaguirre said...

zarza5,

I added to the post your request. Hope this helps, and thanks for the feedback!

Younes_spotfire said...

Hello :),

How can I change the value of "value" in the this function please ?

init = function(){
var g = new JustGage({
id: "gauge",
value: "22", // I want to replace this value by a UniqueCount(MyID) is it possible ? :)
min: 0,
max: 100,
title: "Visitors"
});

I added a calculated column but I don't know how can I do to make it change and refreshed automaticly :( ??
Can You help me please ? :)

Thanks :)

Jose Leviaguirre said...

Younes, try this other gauge. It works great with calculated values

http://spotfired.blogspot.com/2017/03/gaugejs-in-spotfire.html