Spotfire: Custom Gauge for Dashboards

Posted on August 6, 2014 Updated on August 9, 2014

Implementing a Custom Gauge for dashboards

Taking the concept further, we can have a slider on the dashboard to reflect the changing value in the Gauge as in the below screenshot:

HTML:

<DIV style=”WIDTH: 400px; HEIGHT: 320px” id=gauge>
<H4>Change Value</H4>
<SpotfireControl id=”891ea35a30ad4cc9a92c68b6134f4604″ /></DIV>

 

JS:

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

//Make sure you use the Slider Spotfire Control in the “value” field

init=function(){
var g = new JustGage({
id: “gauge”,
value: parseInt($(“#891ea35a30ad4cc9a92c68b6134f4604”).text().substring(0,2)),
min: 0,
max: 100,
title: “Visitors”
});
}

 

Reference