Spotfire: Custom Gauge for Dashboards

Posted on Updated on

Implementing a Custom Gauge for dashboards

Custom_Gauge_1

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:

Custom_Gauge_2

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

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s