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.
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
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
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.
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.
After all the changes save it and you can see the changes…
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
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>
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/how-to-change-width-of-a-dashboard-panel/
That’s all about the Donut-Custom Visualization.
Happy Splunking!!
[…] DONUT – CUSTOM VISUALIZATION […]
[…] have come with a new and very important trick of Splunk. You might have read our previous blog on Donut-Custom Visualization. But the problem is normal drill down will not work with this visualization. What is the solution […]