Donut – Custom Visualization

Donut – Custom Visualization

Hello everyone today we are back with some offbit topic. We will try to create a custom visualization  in the form of donut, if you want to create a donut visualization then this the best possible custom visualization is available in Splunk.

So at first try to understand our requirement from this following figure.

1

Where You have count for three values and in the middle of the donut you want the percentage of your highest value, in this case its showing the percentage of “6” i.e. (6/(6+1+1))*100=75%

So lets start,

Step 1:
At first just take some sample data

index="_internal" sourcetype=splunkd_ui_access
|stats count by method

2

But if we want to get our desired result then we need to change the orientation of our search result.

index="_internal" sourcetype=splunkd_ui_access
|stats count by method
|eventstats max(count) as max
|addcoltotals labelfield=method count
|filldown max
|eval aa=round((max/count)*100)
|eval aa = if(method="Total",aa,'NULL')
|reverse
|filldown
|fields - max
|search NOT method=Total
|eval aa=aa."%"
|eval {aa}=count
|fields - count aa

3

Now you can see the change, value within the red square box  is the percentage of the highest “method” count. I.e. (4830/(700+1+4830+6)*100)=87%
Save this in a dashboard.

Step 2:
Now in the next step go to this following link and download the app.
https://splunkbase.splunk.com/app/3238/

After that Go to the Splunk UI and install the following custom visualization app.

Step 3:
Now go that dashboard where you have saved the above query. Click Edit and this is how one can get the desired visualization.

10

5

Step 4: Coloring issue

Now another problem arises here how you can change the color of the donut as per your requirement. Because with this visualization these are the default color we get.

For that we need to apply the following CSS in the source code.

I have attached the complete CSS and the source code below.

                                                  CSS

                                            SourceCode

And following changes need to be done in the CSS as per your search query.

6
After all the changes save it and you can see the changes…

7
Now what if you want to create legend for this donut in an another dedicated panel.
Just save the following query with your own field name in the same dashboard

| makeresults
|eval status=split("GET,POST,DELETE",",")
|mvexpand status
|fields - _time

And the select color in the following way

8

Now as one sees the alignment of this legend table is from the left side, what if we want from the centre? For that one wee need to add a small html into the source code, which is given below.

<row depends="$alwaysHideCSSPanel$">
 <panel>
  <html depends="$alwaysHideCSS$">
     <style>
        #table1 .table th, .table td {
         text-align: center!important;
           }
     </style>
   </html>
 </panel>
</row>

9

Complete source code is given below.

                                      CompleteSourceCode

Also you can see that you have decreased the width of the legend panel. If you want to learn how to do that then follow our previous blog by clicking the following link

https://splunkonbigdata.com/2020/02/26/how-to-change-width-of-a-dashboard-panel/

That’s all about the Donut-Custom Visualization.

Happy Splunking!!

Advertisements
You can also know about :  How To Pass Country Value From a Cluster Map using Drilldown

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.