Column chart color keyed to x-axis value

[willial]

I've searched around for relevant questions, and I looked at http://answers.splunk.com/answers/58335/change-chart-bar-color-based-on-data-value.html, but the answer doesn't really seem to fall out of anything I've found.

I'm making a chart (fields are model,ratio) in column format and I want to give each model its own color so that it can be visually tracked more easily from one selected time period to another.

Basically, if the "model" field is "Foo" I want the "ratio" column associated to be colored red. If it's "Bar" I want it to be blue. And so on.

Anyone tried anything like this?

[lguinn2]

Actually, I think that Change chart bar color based on data value? will work, but it may not be obvious how to do it.

First, in your search, you create a separate field for each value of model:

yoursearchhere
| eval fooRatio=if(model=="Foo",ratio,null())
| eval barRatio=if(model=="Bar",ratio,null())
| eval otherRatio=if(isnull(fooRatio) AND isnull(barRatio),ratio,null())
| fields - ratio

Then, add the search/report to a dashboard - because only in a dashboard can you take manual control of the colors.

Finally, edit the dashboard XML to add the color assignments. Most of the necessary XML is created automatically - you should only need to add the following line:

<option name="charting.fieldColors">{"fooRatio":0xFF0000, "barRatio":0x0000FF, "otherRatio":0x00FF00}</option>

Take a look at the other answer if you need more context.

[cpetterborg]

I have a similar problem, and the solution I use is a simple one that may also work for you. I have a dashboard that needs to show the state of a tomcat service on a set of hosts. It needs to show green, yellow or red depending on the state of the process on the host. This is made visible by setting the values for the graph to have a value for each color depending on the state. If the state is OK, then the green value for the column is 1, and the yellow and red are 0. If the state is critical, then the red value is 1 and the green and yellow values are 0. Using a stacked column chart, only one of the colors will show. I have two charts in the XML code below, and they are dependent on the same data, so I am using the same search to GET the data, and then doing the search for each chart off that same data.

In your case, you can have a model value for each column that you want in your graph, and only one of the models will use the ratio value, and the others will be zero. The stacked column chart will then show only one of the colors for each of the columns, which I think is what you want to display.

Here is some of the code that I use (XML) that does this:

<label>Tomcat status</label>
  <search id="TomcatStatusSearch">
    <query>sourcetype=tomcat | fields *</query>
    <earliest>-2m@m</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <title>ON1</title>
      <chart>
        <search>
          <query>| search service=*-ON1 | rex field=monitoringmsg " - (?P&lt;state&gt;\w+)" | eval okstate=if(state="OK",1,0) | eval wstate=if(state="Warning",1,0) | eval cstate=if(state="Critical",1,0) | stats last(okstate) as OK, last(wstate) as WARN, last(cstate) as CRIT by service</query>
          <earliest>-5m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.seriesColors">[0x00AA00,0xCCCC00,0xEE0000]</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.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</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.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">stacked100</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <title>BP6</title>
      <chart>
        <search>
          <query>| search service=*-BP6 | rex field=monitoringmsg " - (?P&lt;state&gt;\w+)" | eval okstate=if(state="OK",1,0) | eval wstate=if(state="Warning",1,0) | eval cstate=if(state="Critical",1,0) | stats last(okstate) as OK, last(wstate) as WARN, last(cstate) as CRIT by service</query>
          <earliest>-5m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.seriesColors">[0x00AA00,0xCCCC00,0xEE0000]</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.scale">linear</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</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.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">stacked100</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">all</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
      </chart>
    </panel>
  </row>
</dashboard>

You can set the seriesColors as you would like for your graph, which would replace the green, yellow and red colors that I have in mine. You will probably not want to do the same stats command that I use, and use something else (perhaps timechart or something else).

I have the okstate, wstate and cstate. You would have a value for each of the models in your data. Set each of these to the ratios value for each column in your graph, with only one being the ratio, and the rest being zero.

If you have more questions on this, I'll be happy to reply.

[chengka]

Were you able to get this working? I have the same requirement

[willial]

Sadly, no. I never got anywhere investigating this one.