Timechart count with bar color depending on value

[kdekiri]

Hi,

I have checked several Questions/Answers about defining a color depending on a value but I couldn't find anything specific of a timechart count.

I would like to set the color of the bars if the count value is greater of a specific value. Can someone help me on this?

[niketn]

@kdekiri, you can try the following steps:

1) Use eval to create a range of values to apply required colors (like 0-100=Low, 100-200=Medium etc).
2) Plot the chart by your split by field over the range created above using the chart command (stats with eval can also be used).
3) Then apply charting.fieldColors for the range field.

Following is a run anywhere example based on Splunk's _internal index which gets a count of events per sourcetype (retains only sourcetypes with count (for keeping less diverse sources I have retained count only up to 10000).

| tstats count where index=_internal by sourcetype
| where count<10000 
| eval range=case(count>=0 AND count<100,"1. Low",count>=100 AND count<500,"2. Medium",count>=500 AND count<1000,"3. High",true(),"4. Critical")
| chart sum(count) as count by sourcetype range

Following is the complete Simple XML Dashboard code. Please try out and confirm!

<dashboard>
  <label>Table Bar Color Based on Value</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>| tstats count where index=_internal by sourcetype
| where count<10000 
| eval range=case(count>=0 AND count<100,"1. Low",count>=100 AND count<500,"2. Medium",count>=500 AND count<1000,"3. High",true(),"4. Critical")
| chart sum(count) as count by sourcetype range</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.fieldColors">{"1. Low":"0x53A051","2. Medium":"0xF8BE34","3. High":"0xF1813F","4. Critical":"0xDC4E41"}</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">log</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">0</option>
        <option name="trellis.size">medium</option>
        <option name="trellis.splitBy">range</option>
      </chart>
    </panel>
  </row>
</dashboard>

PS: I have also used Log Scale on Y-Axis to have all Columns appear in the final chart i.e.

<option name="charting.axisY.scale">log</option>