Examples of work
This article provides examples of working with the source code of dashboards. By familiarizing yourself with the JSON source code, the user will be able to further customize the dashboards created.
Basic Dashboard
This example uses a set of simple JSON elements to build a basic dashboard.
Source Code
{
"label": "Basic Dashboard",
"inputs": [],
"rows": [
{
"panels": [
{
"inputs": [],
"height": 600,
"label": "TOP-10 Users actions (Last 24 hours)",
"type": "sm",
"viz": {
"options": {
"colorRuleList": [],
"tableAutoWidth": true,
"pagination": {
"enabled": true,
"rowsPerPageList": [
{
"label": "5"
},
{
"label": "10"
},
{
"label": "25"
},
{
"label": "50"
}
]
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\", values(event.action) as \"Actions\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 10"
},
"summary": {
"enabled": false
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": ""
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "table"
},
"subpanels": []
}
]
}
],
"vars": []
}
Display search results using panels
The search results can be displayed as a table or a list of events, as well as set different diagrams. For this purpose the viz.type parameter is used in the panel, which defines the diagram type.
Source Code
{
"label": "Visualization Panels",
"inputs": [],
"rows": [
{
"panels": [
{
"inputs": [],
"height": 300,
"label": "Top Users Actions (Column Chart)",
"type": "sm",
"viz": {
"options": {
"general": {
"checkedDonut": false,
"checkedLabel": false,
"checkedOther": true,
"checkedSliceCount": false,
"checkedSlicePercent": false,
"textField": "",
"threshold": 2,
"truncateText": false,
"truncatePosition": "right"
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": ""
},
"color": {
"rulesArray": []
},
"theme": {
"name": "Smart Monitor"
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\", values(event.action) as \"Действия\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 5"
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "pie"
},
"subpanels": []
},
{
"inputs": [],
"height": 300,
"label": "Top Users Actions (Single Value)",
"type": "sm",
"viz": {
"options": {
"general": {
"fieldForTrend": "Actions Count",
"fieldForValue": "Actions Count",
"label": ""
},
"color": {
"invert": true,
"isRange": true,
"color": [],
"range": false
},
"show": {
"arrow": false,
"label": false,
"sparkline": true,
"delimiters": true,
"delimiter": ","
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\", values(event.action) as \"Действия\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 5"
},
"drilldown": {
"drilldownText": "",
"drilldownType": "search"
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "single"
},
"subpanels": []
},
{
"inputs": [],
"height": 300,
"label": "Top Users Actions (Table)",
"type": "sm",
"viz": {
"options": {
"colorRuleList": [],
"tableAutoWidth": true,
"pagination": {
"enabled": true,
"rowsPerPageList": [
{
"label": "5"
},
{
"label": "10"
},
{
"label": "25"
},
{
"label": "50"
}
]
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\", values(event.action) as \"Действия\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 5"
},
"summary": {
"enabled": false
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": ""
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "table"
},
"subpanels": []
}
]
},
{
"panels": [
{
"inputs": [],
"height": 300,
"label": "Top Users Actions (Column Chart)",
"type": "sm",
"viz": {
"options": {
"general": {
"showScrollBar": false,
"stackedMode": false,
"enableBar": false,
"multiseries": false
},
"grouping": {
"dataGrouping": true,
"dataGroupingAutoBaseInterval": true,
"dataGroupingBaseInterval": {
"timeUnit": "day",
"count": 1
},
"dataGroupingCount": 1000
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": "",
"drilldownTokens": []
},
"xaxis": {
"title": "",
"labelRotation": 0,
"truncate": false
},
"yaxis": {
"title": "",
"logarithmic": "false",
"minVal": "",
"maxVal": ""
},
"legend": {
"enabled": true,
"position": "right",
"truncateText": false
},
"color": {
"colorList": []
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 5"
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "column"
},
"subpanels": []
},
{
"inputs": [],
"height": 300,
"label": "Top Users Actions (Line Chart)",
"type": "sm",
"viz": {
"options": {
"general": {
"showScrollBar": false,
"stackedMode": false,
"enableArea": false,
"multiseries": false
},
"grouping": {
"dataGrouping": true,
"dataGroupingAutoBaseInterval": true,
"dataGroupingBaseInterval": {
"timeUnit": "day",
"count": 1
},
"dataGroupingCount": 1000
},
"xaxis": {
"title": "",
"labelRotation": 0,
"truncate": false
},
"yaxis": {
"title": "",
"logarithmic": "false",
"minVal": "",
"maxVal": ""
},
"legend": {
"enabled": true,
"position": "right",
"truncateText": true
},
"color": {
"colorList": []
},
"sme": {
"query": "source windows_events\r\n| stats count(event.action) as \"Actions Count\" by user.name\r\n| rename user.name as \"User\"\r\n| sort 0 -num('Actions Count')\r\n| head 5"
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": "",
"drilldownTokens": []
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "line"
},
"subpanels": []
}
]
}
],
"vars": []
}
Setting custom colors for fields in diagrams
The viz.options.color property is used to customize the colors of fields in a diagram. The selected colors will be applied each time this diagram is drawn, regardless of other diagrams or color settings on the dashboard.
Example
The following example demonstrates the color settings for a chart that displays the number of user events for each type of event outcome (event.outcome). The following search query is used in this example.
source windows_events
| search user.name!="*$"
| aggs count(event.action) as event.action.count,
values(event.outcome) as event.outcome by user.name
| chart values(event.action.count) as event.outcome.count over user.name by event.outcome
| fillnull value=0 *
| eval success = tonumber(success)
| eval failure = tonumber(failure)
| table user.name, success, failure
| sort 0 -failure
| head 5
Without setting the viz.options.color.color.colorList property, the visualization uses a predefined mapping of field colors based on the order of the returned values. In this case, the color dark green is used for the success value and green for failure.
To change the mapping of field colors, you must append colorList to the JSON dashboard source code. For example, the following configuration defines the specified colors for each type of outcome.
- success: green
- failure: red
{
"viz": {
"options": {
"color": {
"colorList": [
{
"field": "success",
"color": "#009900"
},
{
"field": "failure",
"color": "#FF0000"
},
{
"field": "unknown",
"color": "#C4C4C0"
}
]
}
}
}
}
After configuring the color scheme, the dashboard looks like this.
Source Code
{
"label": "Visualization Color",
"inputs": [],
"rows": [
{
"panels": [
{
"inputs": [],
"height": 300,
"label": "Color Fields Example",
"type": "sm",
"viz": {
"options": {
"general": {
"showScrollBar": false,
"stackedMode": false,
"enableBar": false,
"multiseries": false
},
"grouping": {
"dataGrouping": true,
"dataGroupingAutoBaseInterval": true,
"dataGroupingBaseInterval": {
"timeUnit": "day",
"count": 1
},
"dataGroupingCount": 1000
},
"drilldown": {
"enableDrilldown": false,
"drilldownType": "search",
"drilldownText": "",
"drilldownQuery": "",
"drilldownCustomTimeTokenEarliest": "now-24h",
"drilldownCustomTimeTokenLatest": "now",
"drilldownSelectTimeToken": "",
"drilldownTokens": []
},
"xaxis": {
"title": "",
"labelRotation": 0,
"truncate": false
},
"yaxis": {
"title": "",
"logarithmic": "false",
"minVal": "",
"maxVal": ""
},
"legend": {
"enabled": true,
"position": "right",
"truncateText": false
},
"color": {
"colorList": [
{
"field": "success",
"color": "#009900"
},
{
"field": "failure",
"color": "#FF0000"
},
{
"field": "unknown",
"color": "#C4C4C0"
}
]
},
"sme": {
"query": "source windows_events\r\n| search user.name!=\"*$\"\r\n| aggs count(event.action) as event.action.count, \r\n values(event.outcome) as event.outcome by user.name\r\n| chart values(event.action.count) as event.outcome.count over user.name by event.outcome\r\n| fillnull value=0 *\r\n| eval success = tonumber(success)\r\n| eval failure = tonumber(failure)\r\n| table user.name, success, failure\r\n| sort 0 -failure\r\n| head 5"
},
"timeToken": ""
},
"timeToken": {
"start": "now-24h",
"end": "now"
},
"type": "column"
},
"subpanels": []
}
]
}
],
"vars": []
}