Dashboards & Visualizations

Change chart bar color based on data value?

lguinn2
Legend

I have a bar chart that represents a key metric for my SLA. Let's say that each bar represents 1 server, and the height (value) of the bar is the number of a certain server error. The SLA says that we can't have more than 20 errors per server.

Currently, my search looks like this:

sourcetype=mysourcetype AND searchstuffforerrors | stats count by host

and the bars are all blue. I would like for the bar to change colors:

  • green when the number of errors is less than 15
  • yellow when the number of errors is 16 - 20
  • red when the number of errors is greater than 20

I can't use a single value panel or a gauge for this, as I need to show all the servers - one bar for each server. How can I do this with Splunk?

Tags (1)
1 Solution

lguinn2
Legend

Here is how

  • Create a new variable for each color of bar that you want: redCount, yellowCount, greenCount - for example
  • Assign the count value to the appropriate variable
  • Create a stacked column chart (or a stacked bar chart if you want it horizontally)
  • Put the chart in a dashboard, so that you can set the color attributes for the bars

Here is a simple XML example of the code snippet for a chart that should work:

<chart>
      <searchString>sourcetype=mysourcetype AND searchstuffforerrors | stats count by host 
        | eval redCount = if(count>20,count,0)
        | eval yellowCount = if(count<=20 AND count>15,count,0)
        | eval greenCount = if(count<=15, count, 0)
        | fields - count</searchString>
      <title>Server Errors by Host - Last  24 hours</title>
      <earliestTime>-24h@h</earliestTime>
      <latestTime>@h</latestTime>
      <option name="charting.chart">column</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.fieldColors">{"redCount":0xFF0000,"yellowCount":0xFFFF00, "greenCount":0x73A550}</option>
      <option name="charting.legend.placement">none</option>
      <option name="charting.legend.placement">none</option>     
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">90</option>  
    </chart>

Note that the last option sets the X-axis labels to print vertically on the column chart. If you prefer, you could set the charting.chart option to "bar" and then eliminate the option for charting.axisLabelsX.majorLabelStyle.rotation

View solution in original post

kmugglet
Communicator

@hwakonwalk
Have you tried using the stack feature in the formatting?

This will remove any zero columns.

It will work if you only have 1 range per timeslot.

Like this

screenshot

hwakonwalk
Path Finder

Yes, long ago and it worked fine
Thanks for the answer 🙂

0 Karma

kmugglet
Communicator

No problem 🙂

0 Karma

lguinn2
Legend

Here is how

  • Create a new variable for each color of bar that you want: redCount, yellowCount, greenCount - for example
  • Assign the count value to the appropriate variable
  • Create a stacked column chart (or a stacked bar chart if you want it horizontally)
  • Put the chart in a dashboard, so that you can set the color attributes for the bars

Here is a simple XML example of the code snippet for a chart that should work:

<chart>
      <searchString>sourcetype=mysourcetype AND searchstuffforerrors | stats count by host 
        | eval redCount = if(count>20,count,0)
        | eval yellowCount = if(count<=20 AND count>15,count,0)
        | eval greenCount = if(count<=15, count, 0)
        | fields - count</searchString>
      <title>Server Errors by Host - Last  24 hours</title>
      <earliestTime>-24h@h</earliestTime>
      <latestTime>@h</latestTime>
      <option name="charting.chart">column</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.fieldColors">{"redCount":0xFF0000,"yellowCount":0xFFFF00, "greenCount":0x73A550}</option>
      <option name="charting.legend.placement">none</option>
      <option name="charting.legend.placement">none</option>     
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">90</option>  
    </chart>

Note that the last option sets the X-axis labels to print vertically on the column chart. If you prefer, you could set the charting.chart option to "bar" and then eliminate the option for charting.axisLabelsX.majorLabelStyle.rotation

aneeshkjm123
Path Finder

How to change the colour of chart if it is a saved search ?

0 Karma

gm_meirelles
New Member

Simply unbelievable, the best logic that I have ever seen, congratulation!

0 Karma

samhodgson
Path Finder

awesomeness, thank you v much for this!

0 Karma

lguinn2
Legend

If you are using a saved search, your saved search should include the eval statements, like this

sourcetype=mysourcetype AND searchstuffforerrors | stats count by host 
| eval redCount = if(count>20,count,0)
| eval yellowCount = if(count<=20 AND count>15,count,0)
| eval greenCount = if(count<=15, count, 0)
| fields - count

And then the XML would be (if you named your search MySearch)

<chart>
      <searchName>MySearch</searchName>
      <title>Server Errors by Host - Last  24 hours</title>
      <option name="charting.chart">column</option>
      <option name="charting.chart.stackMode">stacked</option>
      <option name="charting.fieldColors">{"redCount":0xFF0000,"yellowCount":0xFFFF00, "greenCount":0x73A550}</option>
      <option name="charting.legend.placement">none</option>
      <option name="charting.legend.placement">none</option>     
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">90</option>  
    </chart>

hwakonwalk
Path Finder

I had a similar requirement and it worked fine for me, but the each bar falls in one of three color segments, the other segments have zero value that leads to blank spaces in the Time chart
Is there a way to remove the blank spaces?

0 Karma

a1ay
Explorer

sourcetype=mysourcetype AND searchstuffforerrors | stats count by host
| eval redCount = if(count>20,count,0)
| eval yellowCount = if(count<=20 AND count>15,count,0)
| eval greenCount = if(count<=15, count, 0)
| fields - count

How to make it to count only top 10 values?

0 Karma

email2vamsi
Explorer

Add the following at the ending:-
|top count

0 Karma

zd00191
Communicator
tag="BOFC" OR tag="Compass_Asia" OR tag="Compass_Global" OR tag="Datapass_CCNA" OR tag="Datapass_CPS" OR tag="IPM" OR tag="Picasso" OR tag="SAP_APO" OR tag="SAP_CRM_Call_Center" OR tag="SAP_Finance_Logistics" OR tag="SAP_HR" OR tag="SAP_MDMaint" OR tag="SAP_MDMgmt" OR tag="SAP_SRM" OR tag="SAP_eSourcing" OR    tag="SDW" OR tag="Wall_Street" OR tag="myKO_Portal" OR tag="myKO_UCM" LocID="-7" SbuID="-7" |dedup tag | rex field=ResponseDisplay "(?<Application_Response>\d+)" |rex field=AvailabilityDisplay "(?<Application_Availability>\d+)" |eval x=tonumber(Application_Availability) |eval y=tonumber(Application_Response) |stats values(x) values(y) by tag

x and y are values between 0 and 100. I want x and y values between 0 and 50 to be red, 51 and 75 to be yellow and 76-100 to be green. Please help!

0 Karma

lguinn2
Legend

This is a completely different problem - you should ask this as a question...

lguinn2
Legend

I edited my answer for typos, and now it seems to have gone to be "moderated." Hopefully the accepted answer will return soon!

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...