topic Re: Is conditional background coloring possible in Splunk charts? in Splunk Search

Is conditional background coloring possible in Splunk charts?

ashish9433 — Tue, 12 Jul 2016 12:53:21 GMT

Hi Team,

Can any one help me to know if conditional coloring is possible in Splunk Charts as shown in the below image?

Basically, the background color will be horizontal divisions on basis of condition defined, like for the below chart,
0-5 -> Low - Green Colour
6-25-> Medium - Yellow Colour
more than 25 -> High - Amber Colour

Please guide how such chart can be made in Splunk Dashboard.

Update

If not colouring, atleast can we add additional graph lines, perhaps dotted across the graph to show the threshold boundaries?

Anyone who can help on pointers on this?

Re: Is conditional background coloring possible in Splunk charts?

rafamss — Tue, 12 Jul 2016 13:14:44 GMT

Hi ashish9433,

Take a look at the links below. I believe this can help.

http://docs.splunk.com/Documentation/Splunk/6.1.3/Viz/Chartcustomization
http://docs.splunk.com/Documentation/Splunk/6.2.3/Viz/PanelreferenceforSimplifiedXML
http://docs.splunk.com/Documentation/Splunk/6.2.2/AdvancedDev/CustomChartingConfig-ChartLegend#radialgauge
https://answers.splunk.com/answers/22989/how-to-custom-chart-x-axis-labelposition-viz-uprotationlabelpositions.html

Re: Is conditional background coloring possible in Splunk charts?

sundareshr — Tue, 12 Jul 2016 13:39:07 GMT

See if you get any ideas from this post here. You can setup score as an overlay

https://answers.splunk.com/answers/58335/change-chart-bar-color-based-on-data-value.html

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Wed, 13 Jul 2016 11:27:37 GMT

The above link, does helps me to change the color of the chart. But i do not see any hint of changing the background color of chart. Is there something which i am missing? Can you help?

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Mon, 18 Jul 2016 11:44:17 GMT

I tried and read all the links thoroughly, and i got one link which describes filling the background of the graph.

http://docs.splunk.com/Documentation/Splunk/6.2.10/AdvancedDev/CustomChartingConfig-FontColorBrushPalette#Examples_2

So basically changing the background to one specific colour is working. But i when i tried some other options like SolidFill, GradientFill with multiple colours i do not see any change in the graph.

Is there anything i am missing?

Re: Is conditional background coloring possible in Splunk charts?

rafamss — Mon, 18 Jul 2016 22:58:43 GMT

Could you post your code for looking any thing can help you?

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Tue, 19 Jul 2016 09:02:02 GMT

Let us suppose, i have a chart as below

search = basically count of events in all of my index and assume that score is the count (in the main question image).

This is the XML code with no modification (default)

<dashboard>
  <label>Chart Colouring</label>
  <description>Test App</description>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=* | stats count by index</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </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">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</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">all</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.placement">right</option>
      </chart>
    </panel>
  </row>
</dashboard>

I tried adding the below code

<option name="charting.backgroundBrush">solidFill</option>
<option name="charting.backgroundBrush.color">0xFF0000</option>
<option name="charting.backgroundBrush.alpha">0.5</option>

in the dashboard as below

<dashboard>
  <label>Chart Colouring</label>
  <description>Test App</description>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=* | stats count by index</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.backgroundBrush">solidFill</option>
        <option name="charting.backgroundBrush.color">0xFF0000</option>
        <option name="charting.backgroundBrush.alpha">0.5</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">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</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">all</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.placement">right</option>
      </chart>
    </panel>
  </row>
</dashboard>

and i even tried adding the below code

<option name="charting.backgroundBrush">gradientFill</option>
<option name="charting.backgroundBrush.type">radial</option>
<option name="charting.backgroundBrush.colors">[0xFF0000,0x0000FF]</option>
<option name="charting.backgroundBrush.alphas">[1,1]</option>
<option name="charting.backgroundBrush.ratios">[0,255]</option>
<option name="charting.backgroundBrush.focalPointRatio">.5</option>

in the XML code as below

<dashboard>
  <label>Chart Colouring</label>
  <description>Test App</description>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=* | stats count by index</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.backgroundBrush">gradientFill</option>
        <option name="charting.backgroundBrush.type">radial</option>
        <option name="charting.backgroundBrush.colors">[0xFF0000,0x0000FF]</option>
        <option name="charting.backgroundBrush.alphas">[1,1]</option>
        <option name="charting.backgroundBrush.ratios">[0,255]</option>
        <option name="charting.backgroundBrush.focalPointRatio">.5</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">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</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">all</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.placement">right</option>
      </chart>
    </panel>
  </row>
</dashboard>

But there was no change in the background of the chart. I am able to change the background (white color) to any one single colour by adding the below code

<option name="charting.backgroundColor">0xFFFFFF</option>

But how do i add multiple colours in the background with specific conditions is what i am looking at.

Can you help me what exactly i am missing? or what way should i proceed to get the required background in the chart?

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Mon, 25 Jul 2016 12:00:04 GMT

any clues, after looking at the code below?

Re: Is conditional background coloring possible in Splunk charts?

Lucas_K — Tue, 26 Jul 2016 10:06:24 GMT

If not colouring, atleast can we add additional graph lines, perhaps dotted across the graph to show the threshold boundaries?

That you can be done simply enough.

eval threshold1 = 100 ; eval threshold2 = 200 ; eval threshold1 = 500

Then just select each of those in the visualization panel as a new axis.

Example search : index=_internal | timechart count | eval Low=10, Med=20, High=50

Those numbers could be calculated in your search dynamically aswell.

And what it looks like

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Tue, 26 Jul 2016 10:30:04 GMT

seems to be good workaround! Thanks @Lucas K

any ideas on how can i make the lines distinct/dotted or bit lighter as compared to other graph lines?

Re: Is conditional background coloring possible in Splunk charts?

woodcock — Tue, 26 Jul 2016 12:34:13 GMT

Additionally, if you make it a non-stacked area graph instead of a line (if that visualization has the same settings), the white part below the lines will be colored, too.

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Wed, 27 Jul 2016 12:06:52 GMT

yes not exactly the way wanted, but yes! Thanks @woodcock

Re: Is conditional background coloring possible in Splunk charts?

Melstrathdee — Tue, 27 Sep 2016 02:01:23 GMT

Hey Ashish,
Not sure if you found a solution to your problem but I like the idea of what you are trying to achieve so I played around with it to see what could be done.

Taking the ideas posted by Lucas K I tweaked it and came up with this:

Basically you run your search | pipe a timechart with a count | then pipe an eval with your high med and low values.

Change your chart type to an area chart (This will give you the coloured stripes)
Then instead of overlaying the low, med, high.
The overlay your count.

It looks the way you want it but be aware that your high, medium and low chart levels will have total mouse overs just like the count chart

Hope this helps
Mel
the app assembly

Re: Is conditional background coloring possible in Splunk charts?

ashish9433 — Tue, 27 Sep 2016 09:20:08 GMT

Close enough! Almost similar to what i needed. The only issue which appears to be here is that if my low value is 200, med value is 400 and High value is 600 then High value (600) color is from 0 to 600. Which basically overlaps the low and medium colour.

Apart from that this looks good!

Thanks @Melstrathdee