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

Gauge.js in Spotfire

Gauge.js implementation in Spotfire

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

Example 1

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

note: the spotire calculated value must not contain any formatting

copy and paste the javascript contents of gauge.js from this link:

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

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;

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




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

191 lb

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

<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

<div style="text-align:center">
   <canvas width="200" height="170" id="gauge2"></canvas>
<div id="measure2

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

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; 

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




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.


Franck Genteur said...


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.


Jose Leviaguirre said...


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

Saidul Choudhury 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