Splunk Search

Change graph color based on value

guruwells
Explorer

Hi ,

This is re-putative question> I have verified couple articles to write query for updating colors based on value. I am able to set colors for a specified field, but it's not applying in the graph. Below is the my search.

index=main sourcetype=iis |eval page_time_taken=if(lower(cs_uri_stem)="/view/pages/default.aspx" AND sc_status!="401",time_taken,null()) |timechart avg(page_time_taken) as Average_Response|eval result= if(Average_Response<800, "Green",null())|eval result1=if(Average_Response>800  AND Average_Response<1000, "Yellow",null())|eval result2=if(Average_Response>1000, "Red",null())| rename result as "Average Response Time Below 800ms" result1 as "Average Response Time Below 1000ms" result2 as "Average Response Time Above 1000ms"

Here, it is always Highlighting Average_Respond Color.

Below is my dashboard XML.

Average_Response_Time_Test_Dashboard

<panel>
  <chart>
    <search>
      <query>index=main sourcetype=iis |eval page_time_taken=if(lower(cs_uri_stem)="/view/pages/default.aspx" AND sc_status!="401",time_taken,null()) |timechart avg(page_time_taken) as Average_Response|eval result= if(Average_Response <800, "Green",null())|eval result1=if(Average_Response>800  AND Average_Response<1000, "Yellow",null())|eval result2=if(Average_Response>1000, "Red",null())| rename result as "Average Response Time Below 800ms" result1 as "Average Response Time Below 1000ms" result2 as "Average Response Time Above 1000ms"</query>
    <earliest>-60m@m</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.legend.placement">right</option>
    <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>

    <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
    <option name="charting.layout.splitSeries">0</option>
    <option name="charting.drilldown">all</option>
    <option name="charting.chart.style">shiny</option>
    <option name="charting.chart.stackMode">default</option>
    <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
    <option name="charting.chart.showDataLabels"></option>
    <option name="charting.chart.nullValueMode">gaps</option>
    <option name="charting.chart.bubbleSizeBy">area</option>
    <option name="charting.chart.bubbleMinimumSize">10</option>
    <option name="charting.chart.bubbleMaximumSize">50</option>
    <option name="charting.chart">column</option>
    <option name="charting.axisY2.scale">inherit</option>
    <option name="charting.axisY2.enabled">0</option>
    <option name="charting.axisY.scale">linear</option>
    <option name="charting.axisX.scale">linear</option>
    <option name="charting.axisTitleY2.visibility">visible</option>
    <option name="charting.axisTitleY.visibility">visible</option>
    <option name="charting.axisTitleX.visibility">visible</option>
    <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
    <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
    <option name="charting.fieldColors">{"Average Response Time Above 1000ms":0xFF0000,"Average Response Time Below 1000ms":0xFFFF00,"Average Response Time Below 800ms":0x00FF00}</option>
  </chart>
</panel>

Please help me on this.

1 Solution

hliakathali_spl
Splunk Employee
Splunk Employee

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:

   <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

rohithmn3
New Member

Hi,
This will print blank lines in the graph, how to avoid it...!?

0 Karma

hliakathali_spl
Splunk Employee
Splunk Employee

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:

   <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

qbolbk59
Path Finder

This can be used when we have to define range of values in count attribute. How can i make similar color customization on specific values of search result. For e.g., my search is calculating count of different severity i.e., High, Low, Medium, Severe. And i need to add color as per the following condition
Severe-Red
High- Orange
Medium- Blue
Low- Green

The query i added in the dashboard and the respective XML is below:

Incident Review Dashboard_new

<panel>
  <chart>
    <search>
      <query>| datamodel Incident_Management Notable_Events search | stats count by severity | eval risk=case(severity="high","High_Risk",severity="low","Low_risk",severity="medium","medium_risk",severity="severe","severe_risk") | stats SUM(count) as count by risk |eval color_map=case(risk=High_Risk,"red",risk=low_risk,"yellow")</query>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
      <sampleRatio>1</sampleRatio>
    </search>
    <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
    <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
    <option name="charting.axisTitleX.visibility">visible</option>
    <option name="charting.axisTitleY.visibility">visible</option>
    <option name="charting.axisTitleY2.visibility">visible</option>
    <option name="charting.axisX.scale">linear</option>
    <option name="charting.axisY.scale">linear</option>
    <option name="charting.axisY2.enabled">1</option>
    <option name="charting.axisY2.maximumNumber">200</option>
    <option name="charting.axisY2.minimumNumber">100</option>
    <option name="charting.axisY2.scale">inherit</option>
    <option name="charting.chart">bar</option>
    <option name="charting.chart.bubbleMaximumSize">50</option>
    <option name="charting.chart.bubbleMinimumSize">10</option>
    <option name="charting.chart.bubbleSizeBy">area</option>
    <option name="charting.chart.nullValueMode">gaps</option>
    <option name="charting.chart.overlayFields">color_map</option>
    <option name="charting.chart.showDataLabels">none</option>
    <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
    <option name="charting.chart.stackMode">stacked</option>
    <option name="charting.chart.style">shiny</option>
    <option name="charting.drilldown">none</option>
    <option name="charting.layout.splitSeries">1</option>
    <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
    <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
    <option name="charting.legend.placement">none</option>
    <option name="trellis.enabled">0</option>
    <option name="trellis.scales.shared">1</option>
    <option name="trellis.size">medium</option>
    <option name="charting.fieldColors">{"red":0xFF0000,"yellow":0xFFFF00}</option>
  </chart>
</panel>

The color of the bar are still not changing. I feel i am missing something. Can somebody help ?

0 Karma

rohithmn3
New Member

Hi,

With this
eval Critical = if(PercentUsedSpace>70,PercentUsedSpace,0)
a blank line gets added in the chart..! How to remove blank lines from it...!?
Kindly help here..!

0 Karma

jkat54
SplunkTrust
SplunkTrust

This doesnt work well on a timechart because the field values are _time... This might work though:

index=main sourcetype=iis 
| eval page_time_taken=if(lower(cs_uri_stem)="/view/pages/default.aspx" AND sc_status!="401",time_taken,null()) 
| stats avg(page_time_taken) as Average_Response by _time
| eval AR= if(Average_Response <800, "Green",if(Average_Response>800  AND Average_Response<1000, "Yellow",if(Average_Response>1000, "Red",null())))
| stats avg(page_time_taken) as Average_Response by AR,_time

<option name="charting.fieldColors">{"Red":0xFF0000,"Yellow":0xFFFF00,"Green":0x00FF00}</option>

0 Karma

guruwells
Explorer

Thanks for the mail. Your optimization query is good. But I wanted to display chart with colors if that condition matches. I hope without timechart command we can display data into graphical representation format?. I want to display data into dashboard with graphs.

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 ...