Is there any way to achieve this kind of visualization on Splunk Dashboard?

[shoaibalimir]

Hi all,

I'm exploring ways to get a specific visualization on Splunk Dashboard, I have attached the screenshot as reference below:

In this, if I hover on the yellow or orange bar, it should give the SLA Value, and if I click on the arrow, categories, and further drilldown to the services, currently I've a setup in which SLA Value is represented by Gauge Widget Visualization.

Please assist me if there's any method to get this kind of visualization.

Many Thanks in advance!

[livehybrid · Accepted solution]

Hi @shoaibalimir 

Yes you can achieve this by using a bar chart, you need to separate the different status into series:

Please find dashboard studio example below:

{
    "title": "StatusDash",
    "description": "",
    "inputs": {
        "input_global_trp": {
            "options": {
                "defaultValue": "-24h@h,now",
                "token": "global_time"
            },
            "title": "Global Time Range",
            "type": "input.timerange"
        }
    },
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {
                        "earliest": "$global_time.earliest$",
                        "latest": "$global_time.latest$"
                    }
                }
            }
        }
    },
    "visualizations": {
        "viz_11HT7uMG": {
            "dataSources": {
                "primary": "ds_wtNWwpS3"
            },
            "options": {
                "dataValuesDisplay": "off",
                "legendDisplay": "off",
                "legendTruncation": "ellipsisMiddle",
                "seriesColorsByField": {
                    "bigissue": "#ff0000",
                    "online": "#008000",
                    "smallissue": "#FFA500"
                },
                "showIndependentYRanges": false,
                "showOverlayY2Axis": false,
                "showRoundedY2AxisLabels": false,
                "showSplitSeries": false,
                "showY2MajorGridLines": true,
                "stackMode": "stacked",
                "xAxisLabelRotation": 0,
                "xAxisTitleVisibility": "show",
                "y2AxisAbbreviation": "auto",
                "y2AxisTitleVisibility": "show",
                "yAxisAbbreviation": "auto",
                "yAxisTitleVisibility": "show"
            },
            "type": "splunk.column"
        }
    },
    "dataSources": {
        "ds_wtNWwpS3": {
            "name": "Column chart search",
            "options": {
                "query": "| makeresults count=60\n| streamstats count AS minute\n| eval _time = relative_time(now(), \"-1h\") + (minute-1)*60\n| eval success_count=case(\n      minute IN (5, 21, 35, 48), 53,       \n      minute IN (14, 27, 42), 58,          \n      1=1, 60\n)\n| eval success_pct = round(success_count/60*100, 1)\n| eval status = case(\n    success_pct >= 99, \"online\",\n    success_pct >= 95, \"smallissue\",\n    success_pct < 95, \"bigissue\"\n)\n| table _time, minute, success_count, success_pct, status\n\n| timechart span=1m latest(success_pct) by status",
                "queryParameters": {
                    "earliest": "-60m@m",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [
            "input_global_trp"
        ],
        "layoutDefinitions": {
            "layout_1": {
                "options": {
                    "display": "auto",
                    "height": 960,
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_11HT7uMG",
                        "position": {
                            "h": 250,
                            "w": 1440,
                            "x": 0,
                            "y": 10
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "options": {},
        "tabs": {
            "items": [
                {
                    "label": "New tab",
                    "layoutId": "layout_1"
                }
            ]
        }
    }
}

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[gcusello]

Hi @shoaibalimir ,

there's a visualization very similar to your one: the Swimline App ( https://splunkbase.splunk.com/app/3708 ).

Otherwise, you could create a dashboard containing many panels, one for each region, but I'm not sure that it can be dinamic.

Ciao.

Giuseppe