.gif)
If you are in Spotfire 11 or greater, checkout the gauge mod
calculated value:
<span id=calcValue><SpotfireControl id="SpotfireCalculatedValue" />
</span>
<HR>
<DIV style="WIDTH: 400px; HEIGHT: 320px" id=gauge></DIV>
js
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)
})
init = function(){
var g = new JustGage({
id: "gauge",
value: "22",
min: 0,
max: 100,
title: "Visitors"
});
//refresh gauge when calcvalue changes
$(calcValue).one('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
}
Multiple gauges example:
html
<table>
<tr>
<tr>
<td>
<span id=calcValue1>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge1></DIV>
</td>
<td>
<span id=calcValue2>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge2></DIV>
</td>
<td>
<span id=calcValue3>
<SpotfireControl id="4374585811a84b21b1ce07476e8df3d8" />
</span>
<DIV style="WIDTH: 200px; HEIGHT: 120px" id=gauge3></DIV>
</td>
</tr>
</table>
js
////////////////////////////////justgauge
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)
})
////////////////////////////////gauge 1
init = function(){
var g = new JustGage({
id: "gauge1",
value: "11",
min: 0,
max: 100,
title: "Water"
});
//refresh gauge when calcvalue changes
$(calcValue1).one('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
////////////////////////////////gauge 2
var g = new JustGage({
id: "gauge2",
value: "22",
min: 0,
max: 100,
title: "Oil"
});
//refresh gauge when calcvalue changes
$(calcValue2).one('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
////////////////////////////////gauge 3
var g = new JustGage({
id: "gauge3",
value: "33",
min: 0,
max: 100,
title: "Gas"
});
//refresh gauge when calcvalue changes
$(calcValue3).one('DOMSubtreeModified',function(){
g.refresh($(this).text())
})
}
13 comments:
Don't forget to add a function that redraws when the browser size changes. Text areas don't autoscale
Is there a way to configure the max as green color and min as red? Just trying to make it look like a progress bar
Here is a quick way to change colors gradualy from red-yellow-green. Just put this line before the gauge is created:
var percentColors = [
"#ff0000", //red util 33%
"#ffff00", //yellow at 66%
"#00ff00" //green above 66%
]
here is an example: http://jsfiddle.net/mce1ywef/
Please refer to the gauge documentation (source code 'configurable parameters' section) to customize gauge.
Source code: https://github.com/toorshia/justgage/blob/master/justgage.js#L129
Main site: http://justgage.com/
How to change the scale to percentages? My data is in % how to tweak the script in this case?
A quick way to do so is to put the units on the title or label. For example:
init = function(){
var g = new JustGage({
id: "gauge",
value: "22",
min: 0,
max: 100,
title: "Visitors (%)",
label: "% of visitors over last week"
});
Hello Rebecca,
Thanks for your comments. A way to do it is to trigger a javascript every time you click on a tab. There is a recent post about it here: http://spotfired.blogspot.com/2016/10/trigger-script-when-clicking-on-tab.html but this will execute an action script. If you want to trigger a javascript that refreshes the gauges, then take e a look at http://spotfired.blogspot.com/2015/01/trigger-javascript-when-changing-filters.html
I will work on a specific post to trigger javascript when clicking on a tab, but these post should give you a general idea. Hope this helps.
JLL
Jose,
What I have to change in HTML to get my guage in one line, next to each other? Not under like is in example.
zarza5,
I added to the post your request. Hope this helps, and thanks for the feedback!
Hello :),
How can I change the value of "value" in the this function please ?
init = function(){
var g = new JustGage({
id: "gauge",
value: "22", // I want to replace this value by a UniqueCount(MyID) is it possible ? :)
min: 0,
max: 100,
title: "Visitors"
});
I added a calculated column but I don't know how can I do to make it change and refreshed automaticly :( ??
Can You help me please ? :)
Thanks :)
Younes, try this other gauge. It works great with calculated values
http://spotfired.blogspot.com/2017/03/gaugejs-in-spotfire.html
What do i do in order to have this sync with a specific value column in my table?
Hello @Spotfire
You need to replace the Just copy everything and replace the red placeholder from the code with your own calculated value. Make sure the value can be parsed to a number. For example, no formatting or currency values such as "4,5K" or "$12.34". Just "4500" or "1234" Then configure the min and max values from the init function
If you are on Spotfire 11 or later, you can use Mods
Post a Comment