OK, I have tried to give you a generic JavaScript solution.
You must copy the following JavaScript into a JS file (e.g., kibanareload.js), copy the file into the appserver/static folder of your Splunk app, restart Splunk, reference the file in the top of your SimpleXML file, and then add the custom selection handler.
What this JavaScript does is look for any pan & zoom handlers that edit specific tokens, kibana_pan_zoom.earliest and kibana_pan_zoom.latest . Here is what you need to include on any chart that should trigger the Kibana-like behavior for pan & zoom.
<selection>
<set token="kibana_pan_zoom.earliest">$start$</set>
<set token="kibana_pan_zoom.latest">$end$</set>
</selection>
Here is the full JavaScript file.
(function() {
require([
"underscore",
"jquery",
"splunkjs/mvc",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!",
], function(_, $, mvc) {
function reloadPageWithNewTime(earliest, latest) {
var k = location.href;
var s = location.search.substring(1);
var i = (s.length < 1 ? k.length : k.indexOf(location.search))
var x = s?JSON.parse('{"' + s.replace(/&/g, '","').replace(/=/g,'":"') + '"}',
function(key, value) { return key===""?value:decodeURIComponent(value) }):{}
if (typeof earliest !== "undefined") {
x.earliest = earliest;
}
if (typeof latest !== "undefined") {
x.latest = latest;
}
newSearch = Object.keys(x).map(function(k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(x[k])
}).join('&')
newUrl=k.substring(0, i) + "?" + newSearch;
window.location = newUrl;
};
function setPanZoomTimer() {
if (!pan_zoom_timer_is_on) {
myVar = setTimeout(checkPanZoomBoundaries, 100);
pan_zoom_timer_is_on = 1;
}
}
function checkPanZoomBoundaries() {
var defaultTokenModel = mvc.Components.get('default');
if (pan_zoom_timer_is_on) {
pan_zoom_timer_is_on = 0;
}
var ts_earliest = defaultTokenModel.get("kibana_pan_zoom.earliest");
var ts_latest = defaultTokenModel.get("kibana_pan_zoom.latest");
if ($('[class*="btn-reset"]').length || $('button').find('[class^="resetZoom"]').length && ts_earliest > 0 && ts_latest > 0) {
reloadPageWithNewTime(ts_earliest, ts_latest);
}
}
/////////////////////////////////////////
/// Start Main Code Here
/////////////////////////////////////////
var defaultTokenModel = mvc.Components.get('default');
var pan_zoom_timer_is_on = 0;
defaultTokenModel.on("change:kibana_pan_zoom.earliest", function(model, value, options) {
setPanZoomTimer();
});
defaultTokenModel.on("change:kibana_pan_zoom.latest", function(model, value, options) {
setPanZoomTimer();
});
});
}).call(this);
Here is the modified SimpleXML dashboard I shared earlier. It has been updated to use this new script. You can see in the top line how to reference the JavaScript file that has been copied into the app's appserver/static folder.
<form script="kibanareload.js">
<label>Pan & Zoom Test</label>
<fieldset submitButton="false">
<input type="time" searchWhenChanged="true">
<label></label>
<default>
<earliest>-7d@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<chart>
<search>
<query>
| tstats prestats=t count where index=* by index _time span=1h
| timechart span=1d count by index
</query>
</search>
<option name="charting.chart">line</option>
<selection>
<set token="kibana_pan_zoom.earliest">$start$</set>
<set token="kibana_pan_zoom.latest">$end$</set>
</selection>
</chart>
</panel>
</row>
<row>
<panel>
<chart>
<search>
<query>
| tstats prestats=t count where index=* by host _time span=1h
| timechart span=2h count by host
</query>
</search>
<option name="charting.chart">line</option>
<selection>
<set token="kibana_pan_zoom.earliest">$start$</set>
<set token="kibana_pan_zoom.latest">$end$</set>
</selection>
</chart>
</panel>
<panel>
<chart>
<search>
<query>
| tstats prestats=t count where index=* by sourcetype _time span=1h
| timechart span=2h count by sourcetype
</query>
</search>
<option name="charting.chart">line</option>
<selection>
<set token="kibana_pan_zoom.earliest">$start$</set>
<set token="kibana_pan_zoom.latest">$end$</set>
</selection>
</chart>
</panel>
</row>
</form>
... View more