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!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...