Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Dashboards & Visualizations
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
- Splunk Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- HTML: How to create multiple charts in a single pa...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
HTML: How to create multiple charts in a single panel on the same row?
jedatt01
Builder
12-08-2014
12:09 PM
How can I use HTML to put 4 radial gauges on the same panel in the same row? I've removed the from 3 of my gauges below, but still not working please help!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ISE Enterprise Dashboard HTML | Splunk</title>
<link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
<!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<div class="header">
<div id="placeholder-splunk-bar">
<a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
</div>
<div id="placeholder-app-bar"></div>
</div>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>ISE Enterprise Dashboard HTML</h2>
</div>
<div class="dashboard-row dashboard-row1">
<div class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div class="dashboard-element chart" id="element1" style="width: 100%">
<div class="panel-head">
<h3>Passed Authentications %</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div class="dashboard-element chart" id="element2" style="width: 25%">
<div class="panel-head">
<h3>CPU</h3>
</div>
</div>
<div class="dashboard-element chart" id="element3" style="width: 25%">
<div class="panel-head">
<h3>MEMORY</h3>
</div>
</div>
<div class="dashboard-element chart" id="element4" style="width: 25%">
<div class="panel-head">
<h3>DISK SPACE</h3>
</div>
</div>
<div class="dashboard-element chart" id="element5" style="width: 25%">
<div class="panel-head">
<h3>DISK I/O</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></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">
require.config({
baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
waitSeconds: 0 // Disable require.js load timeout
});
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/headerview",
"splunkjs/mvc/footerview",
"splunkjs/mvc/simplexml/dashboard",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel"
// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/checkboxview"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
HeaderView,
FooterView,
Dashboard,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
DropdownInput,
RadioGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel
// Add comma-separated parameter names here, for example:
// ...UrlTokenModel,
// CheckboxView
) {
var pageLoading = true;
//
// TOKENS
//
// Create token namespaces
var urlTokenModel = new UrlTokenModel();
mvc.Components.registerInstance('url', urlTokenModel);
var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});
urlTokenModel.on('url:navigate', function() {
defaultTokenModel.set(urlTokenModel.toJSON());
if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
submitTokens();
} else {
submittedTokenModel.clear();
}
});
// Initialize tokens
defaultTokenModel.set(urlTokenModel.toJSON());
var defaultUpdate = {};
var submitTokens = function() {
submitTokensSoon(pageLoading);
};
var submitTokensSoon = _.debounce(function(replaceState) {
submittedTokenModel.set(defaultTokenModel.toJSON());
urlTokenModel.saveOnlyWithPrefix('form\\.', defaultTokenModel.toJSON(), {
replaceState: replaceState
});
});
//
// SEARCH MANAGERS
//
var search1 = new SearchManager({
"id": "search1",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"Failed-Attempt\" OR MESSAGE_CLASS=\"Passed-Authentication\" NOT tag=probe NOT tag=diagnostics | dedup host syslog_id _time | stats count(eval(_raw)) as Total, count(eval(MESSAGE_CLASS=\"Passed-Authentication\")) as Passed | eval percent=((Passed/Total)*100) | table percent",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search2 = new SearchManager({
"id": "search2",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval cpu=tonumber(substr(SysStatsUtilizationCpu,0,4)) | stats avg(cpu) AS CPU",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search3 = new SearchManager({
"id": "search3",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval memory=tonumber(substr(SysStatsUtilizationMemory,0,4)) | stats avg(memory) As MEMORY",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search4 = new SearchManager({
"id": "search4",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskspace=tonumber(substr(SysStatsUtilizationDiskSpace,0,4)) | stats avg(diskspace) AS DISKSPACE",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search5 = new SearchManager({
"id": "search5",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskio=tonumber(substr(SysStatsUtilizationDiskIO,0,4)) | stats avg(diskio) AS DISKIO",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
//
// SPLUNK HEADER AND FOOTER
//
new HeaderView({
id: 'header',
section: 'dashboards',
el: $('.header'),
acceleratedAppNav: true
}, {tokens: true}).render();
new FooterView({
id: 'footer',
el: $('.footer')
}, {tokens: true}).render();
//
// DASHBOARD EDITOR
//
new Dashboard({
id: 'dashboard',
el: $('.dashboard-body')
}, {tokens: true}).render();
//
// VIEWS: VISUALIZATION ELEMENTS
//
var element1 = new ChartElement({
"id": "element1",
"charting.chart.rangeValues": "[\"0\",\"45\",\"65\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "markerGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0xd13b3b,0xebe42d,0x7e9f44]",
"charting.axisY.scale": "linear",
"managerid": "search1",
"el": $('#element1')
}, {tokens: true}).render();
var element2 = new ChartElement({
"id": "element2",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search2",
"el": $('#element2')
}, {tokens: true}).render();
var element3 = new ChartElement({
"id": "element3",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search3",
"el": $('#element3')
}, {tokens: true}).render();
var element4 = new ChartElement({
"id": "element4",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search4",
"el": $('#element4')
}, {tokens: true}).render();
var element5 = new ChartElement({
"id": "element5",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search5",
"el": $('#element5')
}, {tokens: true}).render();
submitTokens();
//
// DASHBOARD READY
//
DashboardController.ready();
pageLoading = false;
}
);
</script>
</body>
</html>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
jsharma123
Explorer
10-26-2017
03:11 AM
You can also use HTML table to do this
e.g.
<table style="width:100%">
<tr>
<td colspan="2">
<row>
<panel>
<style>.btn-primary { margin: 5px 10px 5px 0; }</style>
<a href="oil_timeline_chart_view_html" class="btn btn-primary" target="_blank">TimeLine dashboard</a>
</panel>
</row>
</td>
</tr>
<tr>
<th>First</th>
<th>Second</th>
</tr>
<tr>
<td>
<div class="fieldset">
<div class="input input-text" id="input1">
<label>First</label>
</div>
</div>
</td>
<td>
<div class="fieldset">
<div class="input input-text" id="input2">
<label>Second</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="row2" class="dashboard-row dashboard-row2">
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="panel-element-row">
<div class="dashboard-element">
<div class="panel-head">
<h3>Transaction Graph</h3>
</div>
<div class="panel-body">
<p id="chart"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div id="row2" class="dashboard-row dashboard-row2">
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="panel-element-row">
<div class="dashboard-element">
<div class="panel-head">
<h3>Transaction Graph</h3>
</div>
<div class="panel-body">
<p id="chart2"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
ngatchasandra
Builder
01-06-2015
01:11 AM
1- First time, i created a css file as follow:
#element3{
float: left;
}
#element4{
float: left;
}
#element5{
float: left;
}
#element2{
float: left;
}
and name it gauge.css which location is in directory : ...\Splunk\etc\apps\"your app"\appserver\static
2-Second time, i added a mark in my code head as follow:
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/gauge.css" />
3- Third time, because the width panel who contain the four gauge is very small, i created a new row and put them into as follow:
<div class="dashboard-row dashboard-row2">
<div class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div class="dashboard-element chart" id="element2" style="width: 25%">
<div class="panel-head">
<h3>CPU</h3>
</div>
</div>
<div class="dashboard-element chart" id="element3" style="width: 25%">
<div class="panel-head">
<h3>MEMORY</h3>
</div>
</div>
<div class="dashboard-element chart" id="element4" style="width: 25%">
<div class="panel-head">
<h3>DISK SPACE</h3>
</div>
</div>
<div class="dashboard-element chart" id="element5" style="width: 25%">
<div class="panel-head">
<h3>DISK I/O</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
The end code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ISE Enterprise Dashboard HTML | Splunk</title>
<link rel="shortcut icon" href="{{SPLUNKWEB_URL_PREFIX}}/static/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/pages/dashboard-simple-bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
<link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/styl.css" />
<!--[if IE 7]><link rel="stylesheet" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/sprites-ie7.css" /><![endif]-->
</head>
<body class="simplexml preload">
<!--
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system.
-->
<div class="header">
<div id="placeholder-splunk-bar">
<a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
</div>
<div id="placeholder-app-bar"></div>
</div>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>ISE Enterprise Dashboard HTML</h2>
</div>
<div class="dashboard-row dashboard-row1">
<div class="dashboard-cell" style="width: 50%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div class="dashboard-element chart" id="element1" style="width: 100%">
<div class="panel-head">
<h3>Passed Authentications %</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<div class="dashboard-row dashboard-row2">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div class="dashboard-element chart" id="element2" style="width: 25%">
<div class="panel-head">
<h3>CPU</h3>
</div>
</div>
<div class="dashboard-element chart" id="element3" style="width: 25%">
<div class="panel-head">
<h3>MEMORY</h3>
</div>
</div>
<div class="dashboard-element chart" id="element4" style="width: 25%">
<div class="panel-head">
<h3>DISK SPACE</h3>
</div>
</div>
<div class="dashboard-element chart" id="element5" style="width: 25%">
<div class="panel-head">
<h3>DISK I/O</h3>
</div>
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer"></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">
require.config({
baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
waitSeconds: 0 // Disable require.js load timeout
});
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/headerview",
"splunkjs/mvc/footerview",
"splunkjs/mvc/simplexml/dashboard",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel"
// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/checkboxview"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
HeaderView,
FooterView,
Dashboard,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
DropdownInput,
RadioGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel
// Add comma-separated parameter names here, for example:
// ...UrlTokenModel,
// CheckboxView
) {
var pageLoading = true;
//
// TOKENS
//
// Create token namespaces
var urlTokenModel = new UrlTokenModel();
mvc.Components.registerInstance('url', urlTokenModel);
var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});
urlTokenModel.on('url:navigate', function() {
defaultTokenModel.set(urlTokenModel.toJSON());
if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
submitTokens();
} else {
submittedTokenModel.clear();
}
});
// Initialize tokens
defaultTokenModel.set(urlTokenModel.toJSON());
var defaultUpdate = {};
var submitTokens = function() {
submitTokensSoon(pageLoading);
};
var submitTokensSoon = _.debounce(function(replaceState) {
submittedTokenModel.set(defaultTokenModel.toJSON());
urlTokenModel.saveOnlyWithPrefix('form\\.', defaultTokenModel.toJSON(), {
replaceState: replaceState
});
});
//
// SEARCH MANAGERS
//
var search1 = new SearchManager({
"id": "search1",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"Failed-Attempt\" OR MESSAGE_CLASS=\"Passed-Authentication\" NOT tag=probe NOT tag=diagnostics | dedup host syslog_id _time | stats count(eval(_raw)) as Total, count(eval(MESSAGE_CLASS=\"Passed-Authentication\")) as Passed | eval percent=((Passed/Total)*100) | table percent",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search2 = new SearchManager({
"id": "search2",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval cpu=tonumber(substr(SysStatsUtilizationCpu,0,4)) | stats avg(cpu) AS CPU",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search3 = new SearchManager({
"id": "search3",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval memory=tonumber(substr(SysStatsUtilizationMemory,0,4)) | stats avg(memory) As MEMORY",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search4 = new SearchManager({
"id": "search4",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskspace=tonumber(substr(SysStatsUtilizationDiskSpace,0,4)) | stats avg(diskspace) AS DISKSPACE",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
var search5 = new SearchManager({
"id": "search5",
"status_buckets": 0,
"cancelOnUnload": true,
"latest_time": "now",
"search": "index=ise tag=ise_prd MESSAGE_CLASS=\"System-Stats\" | dedup host syslog_id _time | eval diskio=tonumber(substr(SysStatsUtilizationDiskIO,0,4)) | stats avg(diskio) AS DISKIO",
"earliest_time": "-15m",
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});
//
// SPLUNK HEADER AND FOOTER
//
new HeaderView({
id: 'header',
section: 'dashboards',
el: $('.header'),
acceleratedAppNav: true
}, {tokens: true}).render();
new FooterView({
id: 'footer',
el: $('.footer')
}, {tokens: true}).render();
//
// DASHBOARD EDITOR
//
new Dashboard({
id: 'dashboard',
el: $('.dashboard-body')
}, {tokens: true}).render();
//
// VIEWS: VISUALIZATION ELEMENTS
//
var element1 = new ChartElement({
"id": "element1",
"charting.chart.rangeValues": "[\"0\",\"45\",\"65\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "markerGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0xd13b3b,0xebe42d,0x7e9f44]",
"charting.axisY.scale": "linear",
"managerid": "search1",
"el": $('#element1')
}, {tokens: true}).render();
var element2 = new ChartElement({
"id": "element2",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search2",
"el": $('#element2')
}, {tokens: true}).render();
var element3 = new ChartElement({
"id": "element3",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search3",
"el": $('#element3')
}, {tokens: true}).render();
var element4 = new ChartElement({
"id": "element4",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search4",
"el": $('#element4')
}, {tokens: true}).render();
var element5 = new ChartElement({
"id": "element5",
"charting.chart.rangeValues": "[\"0\",\"80\",\"90\",\"100\"]",
"charting.axisTitleY.visibility": "visible",
"charting.axisTitleX.visibility": "visible",
"charting.chart.style": "minimal",
"charting.layout.splitSeries": "0",
"charting.chart.nullValueMode": "gaps",
"charting.chart": "radialGauge",
"charting.chart.stackMode": "default",
"charting.axisX.scale": "linear",
"charting.legend.placement": "right",
"charting.drilldown": "all",
"charting.chart.sliceCollapsingThreshold": "0.01",
"charting.legend.labelStyle.overflowMode": "ellipsisMiddle",
"resizable": true,
"charting.gaugeColors": "[0x84E900,0xFFE800,0xBF3030]",
"charting.axisY.scale": "linear",
"managerid": "search5",
"el": $('#element5')
}, {tokens: true}).render();
submitTokens();
//
// DASHBOARD READY
//
DashboardController.ready();
pageLoading = false;
}
);
</script>
</body>
</html>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Tanefo
Path Finder
12-11-2014
03:12 AM
see very well this:
do this action or delete it in your code , it's to remove the from 3 of your gauges correctly in your dashbord
ISE Enterprise Dashboard HTML
Passed Authentications %
CPU
DISK SPACE
DISK I/O
Get Updates on the Splunk Community!
Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...
The Transformative Power of AI and ML in Enhancing Observability
In the realm of IT operations, the ...
.conf24 | Registration Open!
Hello, hello! I come bearing good news: Registration for .conf24 is now open!
conf is Splunk’s rad annual ...
ICYMI - Check out the latest releases of Splunk Edge Processor
Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.
HEC Receiver authorization ...
