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!

Fun with Regular Expression - multiples of nine

Fun with Regular Expression - multiples of nineThis challenge was first posted on Slack #regex channel ...

[Live Demo] Watch SOC transformation in action with the reimagined Splunk Enterprise ...

Overwhelmed SOC? Splunk ES Has Your Back Tool sprawl, alert fatigue, and endless context switching are making ...

What’s New & Next in Splunk SOAR

Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us on ...