This is fantastic! I am unable to get the progress to show. It is showing the text percent instead of a visual representation. I would greatly appreciate any help you could offer. Thank you!
inline snippet:
function stageGaugeInit(){ //The HTML template element where the gauge will be rendered
var gaugeBar = skuid.$(‘#animate’);
//Get the % complete from the merge field in the HTML template
var percentComplete = gaugeBar.attr(“data-progress”);
//Get the client record
var theStateProgramRecord = skuid.model.getModel(‘StateProgram’).getFirstRow();
//Get the gauge colour from the related Stage record
skuid.$(gaugeBar).css(‘background-color’, ‘#0000FF’);
//Set the gauge width, animation and label
skuid.$(gaugeBar).delay(‘1500’).animate({
width: percentComplete
}, 1000, “swing”, function() {
skuid.$(‘#stagelabel’).text(“Percent Complete”);
});
}
//Run the stage gauge on page load
skuid.$(function() {
stageGaugeInit()
});
template:
