test

Warning when upgrading to Spotfire 10

TIBCO has deprecated the JQueryUI Javascript library in the latest Spotfire 10.0 release

TIBCO Community pages show us how to use JQuery properly

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