Custom Gage (6.0+)

For 7.0+ or webplayer on HTML5 go here: 

html:
<div id="gauge" style="width:400px; height:320px"></div>


script:

//define your javascript libraries

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)
})

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

You can update the gauge value by using a Label Proprty Control but you will need to trigger a javascript function to update your gauge. 

In this example, I created a Slider Property Control that updates gaugeVal document property and another Label Property Control to pass the value to javascript:

html:
Slider:
<SpotfireControl id="617a9b7087f54fd5b4aac3b4198174b7" />

Label:
<SpotfireControl id="26c6c60aefc546b2b586734d473898db" />

Update button:
<div style='cursor:pointer;padding:3px;text-align:center;background:lightblue;border:2px outset gray;width:100px;height:15px;' id="updateGaugeButton">update</div><br/>

Gauge:
<div id="gauge" style="width:400px; height:320px"></div>



script: 
//setup onclick on update button  
$("#updateGaugeButton").click(function(){
    g.refresh(parseInt($("#26c6c60aefc546b2b586734d473898db").text()))
})

You might want to avoid using the update button every time the value changes. For that, we need to refresh the page, I mean, the Text Area. To do so, attach this ironpython script on your document property when the value changes:

#Make sure your vis is a script parameter that points to your TextArea visualizaiton
from Spotfire.Dxp.Application.Visuals import HtmlTextArea
vis.As[HtmlTextArea]().HtmlContent += " "

If you remove your update button, then you need to change your javascript init function to take the value from your spotfire label control like this:
init=function(){
  var g = new JustGage({
    id: "gauge", 
    value: parseInt($("#26c6c60aefc546b2b586734d473898db").text()), 
    min: 0,
    max: 100,
    title: "Visitors"
  }); 
}