Dashboards & Visualizations

How to put condition in xml to change colors

Explorer

Hi !

I have my chart in function of the time and I have <option name="charting.fieldColors">{"OK":0x65a637,"KO":0xd93f3c}</option>

How, in my xml (or in the search), can I change the color of OK between a period ( ex: 0h - 1h) ???

Or can I rename this variable in my splunk search when the time is between 0h and 1h on my graph ? How ?

Thx

0 Karma
1 Solution

SplunkTrust
SplunkTrust

@henriq_c try the following query. It creates an additional series for OK for hour 1:00 AM called OK (1 AM).

 <yourMainQuery>
| eval Time=strftime(_time,"%H")
| eval yourFiledForOKAndKO=case(Time==1 AND yourFiledForOKAndKO=="OK",yourFiledForOKAndKO." (1 AM)",true(),yourFiledForOKAndKO)
 | timechart span=1h count by yourFiledForOKAndKO

You can use the same in charting.fieldColors to assign a separate color

<option name="charting.fieldColors">{"OK": 0x65a637, "KO": 0xd93f3c, "OK (1 AM)": 0x006D9C}</option>

Following is a run anywhere example based on Splunk's _internal index which plots two series WARN and ERROR and then create WARN (1 AM) as third series using SPL. Colors have been assigned for the three series.

alt text

Following is the Simple XML Code:

<dashboard>
  <label>Chart with Splunkd warning marker 1 AM</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| eval Time=strftime(_time,"%H")
| eval log_level=case(Time==1 AND log_level=="WARN",log_level." (1 AM)",true(),log_level)
| timechart span=1h count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.fieldColors">{"ERROR": 0xFF0000, "WARN": 0xFF9900, "WARN (1 AM)": 0x006D9C}</option>
        <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.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</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.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

SplunkTrust
SplunkTrust

@henriq_c try the following query. It creates an additional series for OK for hour 1:00 AM called OK (1 AM).

 <yourMainQuery>
| eval Time=strftime(_time,"%H")
| eval yourFiledForOKAndKO=case(Time==1 AND yourFiledForOKAndKO=="OK",yourFiledForOKAndKO." (1 AM)",true(),yourFiledForOKAndKO)
 | timechart span=1h count by yourFiledForOKAndKO

You can use the same in charting.fieldColors to assign a separate color

<option name="charting.fieldColors">{"OK": 0x65a637, "KO": 0xd93f3c, "OK (1 AM)": 0x006D9C}</option>

Following is a run anywhere example based on Splunk's _internal index which plots two series WARN and ERROR and then create WARN (1 AM) as third series using SPL. Colors have been assigned for the three series.

alt text

Following is the Simple XML Code:

<dashboard>
  <label>Chart with Splunkd warning marker 1 AM</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| eval Time=strftime(_time,"%H")
| eval log_level=case(Time==1 AND log_level=="WARN",log_level." (1 AM)",true(),log_level)
| timechart span=1h count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.fieldColors">{"ERROR": 0xFF0000, "WARN": 0xFF9900, "WARN (1 AM)": 0x006D9C}</option>
        <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.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</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.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

Explorer

@niketnilay

to detail my question I have this for the moment :
| eval myHour=strftime(time, "%H")
| fields title timed
out responsecode
| fillnull value=600 response
code
| eval responsecode=if(responsecode="",600, responsecode)
| eval success=case(response
code>=402, 0, timedout == "True", 0)
| fillnull value=1 success
| timechart span=5m min(success) as dispo
every5m, max(responsecode) as maxresponsecode
| eval availability=case(myHour>0 and myHour < 1 and availability=="KO",availability." Maintenance", dispoevery5m==1,"OK", dispoevery5m==0,"KO")
| fields availability maxresponsecode
| timechart span=5m sum(maxresponsecode) by availability

(the new values don't appear :/)

0 Karma

SplunkTrust
SplunkTrust

@henriq_c try the following: The field myHour that you had created gets lost when you retain only specific fields in the second line after it. Even if you did that, once you use the first timechart command the myHour field will get dropped again. So I have moved the field after the first timechart command right before the case statement and dropped after that.

<yourCurrentMainSearch>
| fields _time title timed_out response_code 
| fillnull value=600 response_code 
| eval response_code=if(response_code="",600, response_code) 
| eval success=case(response_code>=402, 0, timed_out == "True", 0) 
| fillnull value=1 success 
| timechart span=5m min(success) as dispo_every_5m, max(response_code) as max_response_code 
| eval myHour=strftime(_time, "%H")
| eval availability=case(myHour>0 AND myHour<1 AND availability=="KO",availability." Maintenance", dispo_every_5m==1,"OK", dispo_every_5m==0,"KO") 
| fields - myHour dispo_every_5m
| timechart span=5m sum(max_response_code) by availability
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Explorer

I succeed with that :
| eval availability=case(dispoevery5m==1,"OK", dispoevery5m==0,"KO")
| eval availability=if(myHour<=1 AND availability=="KO", "KO Maintenance", availability)
(so between 0 and 1, ko maintenance is here)

0 Karma

SplunkTrust
SplunkTrust

Hi @henriq_c,

Color is based on the Y axis value not the X axis, as you can see the option name is fieldColors you can't use this option to change the color based on the X axis.

Here you can find all the possible options for a chart :
https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#General_chart_pr...
More details specific for line chart :
https://docs.splunk.com/Documentation/Splunk/latest/Viz/ChartConfigurationReference#Line_chart_prope...

None of the links above contain an option to color based on X, the only possible way to do that is to include some JS and give the color you need for that time frame.

Cheers,
David

0 Karma

Explorer

Can I rename my variable in my splunk search when the time is between 0h and 1h on my graph ? How ?

0 Karma

SplunkTrust
SplunkTrust

you could with an eval create a field for this time condition, but this new field will not be part of your existing line, and you'll also have the field name showing on the legend of the chart... not sure if that'd look nice..

SplunkTrust
SplunkTrust

@DavidHourani I saw this post after posting my answer.

If the requirement would to be hide Legends (then the same can be done through UI Edit). If the requirement would be to hide only 1 AM legend then the same can be done through CSS. However, series count would either need to be calculated or made fixed for CSS to always work.

  <html depends="$alwaysHiddenCSSPanel$">
    <style>
    #myChart .highcharts-legend .highcharts-series-2{
      visibility: hidden !important;
    }
    </style>
  </html>
  <chart id="myChart">

The above would be more complex with token on series count.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

SplunkTrust
SplunkTrust

@niketnilay, I was thinking if he wanted to keep all legends that it might mess the chart up a bit, but when I saw your answer, it actually looks good with that WARN (1 AM), doesn't add noise at all 🙂

SplunkTrust
SplunkTrust

Let us see if it solves @henriq_c 's problem or not 🙂 There are always ways to implement the use case as per our needs 😉

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Explorer

it's better to answer on the 1st post ^^

0 Karma