Customizing Splunk dashboards using JavaScript
Before we start using custom JavaScript, let's work with the already included JavaScript to make our dashboard include animation. In this example, we will add additional controls to each chart to allow them to slide. This is advantageous in that you can give the user control to hide charts they are not interested in, or that take up too much space to see the charts they want to examine.
Firstly, let's add the slide controls. Right after the panel-element-row div
tag for the two charts, you will see a panel-head div
tag. After the panel-head div
tag, you will see a dashboard-element div
tag. The concept here is to use the header as the slide control, thereby leaving the header visible and allowing the end user to notice that there might be more information. In order to achieve this, you must move the header before the element. The default code shows the header contained within the div
element:
<div id="element6" class="...