Custom Gage (6.0+)

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

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post