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.



6 comments:

Franck Genteur 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.

Vedanshi Murarka 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