Splunk Search
Highlighted

Is conditional background coloring possible in Splunk charts?

Communicator

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

alt text

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?

Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Communicator

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

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?

0 Karma
Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Contributor

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

0 Karma
Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Communicator

any clues, after looking at the code below?

0 Karma
Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Communicator

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?

0 Karma
Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Legend

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

Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Communicator

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?

0 Karma
Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Motivator

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

alt text

View solution in original post

Highlighted

Re: Is conditional background coloring possible in Splunk charts?

Communicator

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?

0 Karma