Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer



If you find this site useful and you want to support, buy me a coffee   to keep this site alive and without ads.

Gauge.js in Spotfire

Gauge.js implementation in Spotfire



Ingredients:
  • 1 text area
  • calculated value control or label property control
  • two javascripts: gauge.js and yourGauge.js in textarea

Example 1





html
<canvas id="gauge1"></canvas>
<span id="calcValue1" style='display:none'>
   <SpotfireControl id="SpotfireCalculatedValueControlHere" />
</span>   

note: the spotire calculated value must not contain any formatting

gauge.js
copy and paste the javascript contents of gauge.js from this link:
http://bernii.github.io/gauge.js/dist/gauge.min.js 


Note: If using more than one gauge in a tab, only one gauge.js is needed in one text area.

yourGauge.js
var opts = {
  lines: 12,
  angle: 0.054,
  lineWidth: 0.54,
  pointer: {
    length: 0.8,
    strokeWidth: 0.035,
    color: '#000000'
  },
  staticZones: [
   {strokeStyle: "#F03E3E", min: 0, max: 130}, // Red from 0 to 130
   {strokeStyle: "#FFDD00", min: 130, max: 250}, // Yellow
   {strokeStyle: "#30B32D", min: 250, max: 320}, // Green
   {strokeStyle: "#FFDD00", min: 320, max: 460}, // Yellow
   {strokeStyle: "#F03E3E", min: 460, max: 1000}  // Red
],
staticLabels: {
  font: "10px sans-serif",  
  labels: [000, 250, 350, 450, 550, 1000],  
  color: "#000000",  
  fractionDigits: 0  
},
  limitMax: 'false', 
  percentColors: [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]], 
  strokeColor: '#E0E0E0',
  generateGradient: true
};

var target = document.getElementById('gauge1');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 1000;
gauge.animationSpeed = 12;
//gauge.set(250);

function refreshGauge1(){
  val = parseInt($("#calcValue1").text())
  if(isNaN(val)) return

  gauge.set(val)
}

$("#calcValue1").one('DOMSubtreeModified',refreshGauge1)

refreshGauge1();

To show the actual calculated value with specific formatting, add another calculated value wrapped in a div with proper positioning:


191 lb

html
<canvas id="gauge1"></canvas>
<span id="calcValue1" style='display:none'>
   <SpotfireControl id="SpotfireCalculatedValueControlHere" />
</span>   

<div style='position:absolute;top:150px;left:125px;font-size:30px'>
   <SpotfireControl id="VisibleSpotfireCalculatedValueControlHere" /></div>


note: The visible Spotfire calculated value can contain any formatting, but it will not animate the same was as the next example
Example 2



html
<div style="text-align:center">
   <canvas width="200" height="170" id="gauge2"></canvas>
<div id="measure2
   style="font-size:45px;
        position:absolute;
        top:55px;left:0;right:0;
        text-align:center;">
   </div>
</div>

<span id="calcValue2" style='display:none'>
   <SpotfireControl id="SpotfireCalculatedValueControlHere" 
</span>    

js
var opts = {
  lines: 12, 
  angle: 0.22,
  lineWidth: 0.1, 
  pointer: {
    length: 0.5, 
    strokeWidth: 0.035, 
    color: '#afafaf' 
  },
  limitMax: 'false', 
  colorStart: '#2DA3DC', 
  colorStop: '#C0C0DB',
  strokeColor: '#EEEEEE', 
  generateGradient: true
};
var target = document.getElementById('gauge2'); 
var gauge = new Donut(target).setOptions(opts); 

gauge.maxValue = 100; 
gauge.animationSpeed = 32; 
gauge.setTextField(document.getElementById("measure2"));

function refreshGauge2(){
  val = parseInt($("#calcValue2").text())
  if(isNaN(val)) return

  gauge.set(val)
}

$("#calcValue2").one('DOMSubtreeModified',refreshGauge2)

refreshGauge2();




Note: When editing the html or javascript from the text area, the gauge might seem to disappear. Just click another tab and come back to re-render the gauge. It also works by making the calc value change.



13 comments:

Unknown said...

Hi

Not sure my previous comment got through so sorry for reposting if it did...

I was wondering how you made 'canvas' to work since the HTML editor complains that it is not supported?

Thanks a lot

Jose Leviaguirre said...

Hello Franck,

You need to tell your spotfire admin to turn off html sanitizing from tools>admin manager>preferences>TextArea>TAPreferences>PerfomrHtmlSanitation:false

Mitch said...

Hi There,

Thanks a lot for sharing this.

I stumble accross the same problem as Franck.
I'm trying to use the gauge in Spotfire Desktop.
And there I can't find the same preference pane as the one mentionned above.
Is there a way to make this work?

Thanks a lot.

Michel

Jose Leviaguirre said...

Michel,

If you dont see that option is because you do not have permission to do so. Contact your spotfire admin to disable html sanitation.

Unknown said...

Hi Joe,

val = parseInt($("#calcValue1").text()) gives me a Nan when i print it.
What is the best way to get the value of calculated value in Javascript?

Jose Leviaguirre said...

Hello Vendash. Make sure your don't have any calcValue1 formatting. For example, if your value is "$44" or "44%" javascript will not be able to parseInt

Unknown said...

Hi I was able to make this work with range from 0-100 but the only problem I face is that every time I activate that tab it shows green gauge and once I open the script using edit and close it refreshes. How do I force it to refresh every time I am on the active page

BCauich said...

Buenas tardes.

Estoy implementando el Gauge.js versiĆ³n 1.3.6 javascript al Spotfire, tengo 4 Gaujes diferentes una en un area de texto diferente, interactua bien con el dato calculado, mi problema es que al cerrar el proyecto y volverlo a abrir los gauges desaparecen, se ve de nuevo al editar el area de texto haga una referencia al gauge.js guargar los cambio y regresarle el script correspondiente.


Agradesco cualquier comentario.

Jose Leviaguirre said...

Hola BCauich. Mandame un mensaje a spotfired arroba kamarble

Jason said...

Hi Jose great stuff. I have a live view connection and a calculated value connected to a column from that data table. The data is changing each second but can't get the gauges to adjust with it. I get a reference error: Donut is not defined for the donut example. Any help would be appreciated! thanks

Jose Leviaguirre said...

Hello Jason,

You can use a setInterval function. It takes a function as an argument and the number of seconds you want the function to run. for example: setInterval(refreshGauge,1000)

Another option is to refresh you gauge every time a calculated value changes. If the .on('DOMSubtreeModified') does not work, try the MutationObserver as seen in this example

Mike Weng said...

Hi Jose,
I also have the problem for "val = parseInt($("#calcValue1").text()) gives me a Nan when I print it", but I am sure that the calcValue1 don't have any formatting, it seems the calcValue1 don't pass into yourGauge.js.
Do you have any idea to resolve this problem?

Mike Weng said...

Hi Jose,
Sorry, I didn't notice the top memo, because I use the version 10.3 of Spotfire , it's not work.
I also have the solution from TIBCO support,
add the button in HTML, and add below code in JS:
"$("#myButton").button().bind('click', refreshGauge1)"
when click the button, the calculated value can pass into JS.