After much research and trial & error, I believe the answer to this question is: Because the elements have not finished loading when this JavaScript code is run.
I tried several ways to work around this, including:
$(document).ready(function(){
$(document).bind("PageReady", function() {
And a few others.
But none of these methods ran after the Water Gauge element was created - likely because the visualization itself is built with JavaScript. I ended up wrapping the whole thing in a "setTimeout" block with a wait of 10s. This is a terrible hack, but it's the only way I could figure out to run the script after the water gauge was done loading.
I also attempted to use the native MVC click method instead of jQuery, but could not get the click event to fire. However, I did work around the hardcoded "options" variable, and now read it no matter where the Water Gauge lives in Splunk. Here is the code I finally ended up using:
setTimeout(function(){
var components = [
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!",
"jquery",
'splunkjs/mvc/utils'
];
require(components, function(
mvc,
ignored,
$,
utils
) {
$('.splunk-water-gauge').unbind();
$('.splunk-water-gauge').click(function(el) {
var re=/([\$].+?[\$])/g
var url;
var tokens = mvc.Components.get("submitted");
parent_el = $(this).parents('div[class^="dashboard-element viz"]')[0].id;
if (typeof(parent_el) == 'undefined') {
return false;
}
viz_details = mvc.Components.getInstance(parent_el);
var optionsArray = viz_details.options.reportContent;
getOptionsKeys = Object.keys(optionsArray);
getOptionsKeys.forEach(function(item) {
if(item.indexOf("drilldown") != -1) {
url=optionsArray[item];
}
});
if(typeof(url) == 'undefined') {
return false;
}
var tokensArray=url.match(re);
$(tokensArray).each(function(i,token) {
clean_token=token.replace(/\$?/g,"");
var tokenValue = tokens.get(clean_token);
url=url.replace(token,tokenValue);
});
utils.redirect(url, false, "_blank");
});
});
}, 5000);
Edited to add token handling.
... View more