Dashboards & Visualizations

Change chart bar color based on data value?

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

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

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

Path Finder

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

0 Karma

Communicator

No problem 🙂

0 Karma

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

Path Finder

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

0 Karma

New Member

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

0 Karma

Path Finder

awesomeness, thank you v much for this!

0 Karma

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>

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

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

Explorer

Add the following at the ending:-
|top count

0 Karma

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

Legend

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

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