Dashboards & Visualizations

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

shoaibalimir
Explorer

Hi all,

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

shoaibalimir_0-1745474639049.png

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!

Labels (2)
0 Karma
1 Solution

livehybrid
SplunkTrust
SplunkTrust

Hi @shoaibalimir 

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

livehybrid_0-1745479958482.png

 

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

View solution in original post

livehybrid
SplunkTrust
SplunkTrust

Hi @shoaibalimir 

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

livehybrid_0-1745479958482.png

 

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
SplunkTrust
SplunkTrust

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

0 Karma
Get Updates on the Splunk Community!

Index This | Why did the turkey cross the road?

November 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Feel the Splunk Love: Real Stories from Real Customers

Hello Splunk Community,    What’s the best part of hearing how our customers use Splunk? Easy: the positive ...