Inspecting this issue I've noticed, that refreshing or changing the search will also refresh all the elements linked to it. For example if I have chart with managerid set to a search, i can easily redraw this chart by grabbing the search and refreshing it with for example .startSearch() method. It would all depend on the data and your needs. I have tailored a simple example of html dashboard which would change the search string for searchManager and by doing so it will redraw the chart corresponding to it. I've removed all unnecessary code, but in the production You might use tokens instead of setting the search string from dictionary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test3</title>
</head>
<body class="simplexml preload locale-en">
<select style="width:350px;" tabindex="1" id='targetsDropdown'>
<option>Search1</option>
<option>Search2</option>
<option>Search3</option>
</select>
<div id='mybarchart'></div>
<!--
END LAYOUT
-->
<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
<script type="text/javascript">
// <![CDATA[
require.config({
baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
waitSeconds: 0 // Disable require.js load timeout
});
require([
"splunkjs/mvc",
"underscore",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/simplexml/urltokenmodel",
"splunkjs/mvc/chartview"
],
function(
mvc,
_,
$,
SearchManager,
UrlTokenModel,
chartView
) {
var ChartView = require("splunkjs/mvc/chartview");
// dictionary with searches (the names have to match the ones on dropdown)
var searches = {
'Search1': 'index=_internal | head 100 | stats count by source',
'Search2': 'index=_internal | head 100 | stats count by processor',
'Search3': 'index=_internal | head 100 | stats count by name'
}
// creating search
var mysearch = new SearchManager({
id: "mysearch1",
earliest_time: "-48h",
latest_time: "now",
search: "index=_internal | head 100 | stats count by source"
});
// creating barchart
var barchart = new ChartView({
id: "example-chart",
managerid: "mysearch1",
type: "bar",
"charting.chart.stackMode": "stacked",
"charting.legend.placement": "bottom",
el: $("#mybarchart"),
height: 450
}).render();
// grab the dropdown menu
var dropdown = $('#targetsDropdown');
// on change set the search to the corresponding search string from the searches dictionary
dropdown.on('change', function() {
mysearch.set('search', searches[this.value]) // this.value is selected value on the dropdown
})
}
);
// ]]>
</script>
</body>
</html>
... View more