Dashboards & Visualizations
Highlighted

How to choose the different colors for the column chart and the trellis visualization?

Path Finder

Hello All,

I had developed a visualization using chart count by and enabled trellies customization
gone through the documentation and some more links as follows

http://docs.splunk.com/Documentation/Splunk/6.2.4/Viz/Chartcustomization
https://answers.splunk.com/answers/670058/how-can-i-get-colors-into-trellis-for-values-that.html?utm...

Didn't get the clear idea yet … How to change colors for diff type of events ?

What changes do I need to do to my existing XML below

      <query>savedsearch</query>
      <sampleRatio>1</sampleRatio>
    </search>

    <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
    <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
    <option name="charting.axisTitleX.visibility">collapsed</option>
    <option name="charting.axisTitleY.visibility">visible</option>
    <option name="charting.axisTitleY2.visibility">collapsed</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">all</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.legend.placement">none</option>
    <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
    <option name="charting.legend.labelStyle.overflowMode">ellipsisEnd</option>
    <option name="charting.legend.mode">standard</option>
    <option name="charting.lineWidth">2</option>
    <option name="refresh.display">progressbar</option>
    <option name="trellis.enabled">1</option>
    <option name="trellis.scales.shared">1</option>
    <option name="trellis.size">small</option>
    <option name="trellis.splitBy">servername</option>
  </chart>

alt text

0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Path Finder

Anyone???
the piece of code I got from here is this ,,, but its not working fine

My dashboard

<chart>
  <searchName>My saved report</searchName>
  <option name="charting.legend.labels">[error,warn,ok]</option>
  <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
  <option name="charting.legend.masterLegend"></option>
 </chart>
0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Communicator

Hi,

Try this instead :

    <option name="charting.fieldColors">{"ERROR":0x65a637, "WARN":0xd93f3c, "INFO":#b3d9ff}</option>

Adapt the color as you wish

3no

0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Path Finder

The above dashboard panel was built by using regex

index="some" |rex field=_raw "^(?:[^[\n]*[){2}(?P\w+)" |where (ann=="ERROR" OR ann=="WARN" OR ann=="INFO")

Then its giving the output like that (bar chart with trillies visualization ), when I refer the ann filed in the query ,, so there is only one filed ..which is bringing different values in that (INFO,ERROR,WARN) .. I need different colour for each of the values

Any help ??

0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Communicator

Did you tried my solution ? I just updated it with your info.

0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Legend

@raj_mpl your current output seems to create only one legend in Trellis view i.e. count which has default blue color.

In order to have loglevels i.e. INFO, ERROR and WARN as legends you would need to have one additional split by field for your stats. Since you have only two fields `loglevelandcomponent, I have created a dummy field i.e.componentX` for x-axis

index=_internal sourcetype=splunkd log_level=*
| chart count by component log_level
| eval componentX=component
| stats sum(INFO) as INFO sum(WARN) as WARN sum(ERROR) as ERROR by component componentX

Following is a run anywhere example on similar approach:

alt text

Following is the simple XML dashboard code for run anywhere example.
PS: charting.fieldColor has been applied to three series i.e. INFO, ERROR, WARN. Legend placement i.e. charting.legend.placement is added and other required configurations done for Trellis.

<dashboard>
  <label>Trellis with Field Colors in Column Chart</label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level=*
| chart count by component log_level
| eval componentX=component
| stats sum(INFO) as INFO sum(WARN) as WARN sum(ERROR) as ERROR by component componentX</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.fieldColors">{"INFO":0x65A637, "WARN":0xFFBF00, "ERROR":#FF0000}</option>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">collapsed</option>
        <option name="charting.axisTitleY.visibility">collapsed</option>
        <option name="charting.axisTitleY2.visibility">collapsed</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">minimal</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">bottom</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">0</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>

Please try out and confirm!




| eval message="Happy Splunking!!!"


View solution in original post

0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Path Finder

Hi @niketnilay , Tried with the above solution , it worked . Thank you …
but , when I edit the panel (just click check and uncheck the edit trellis button) , The down side in x-axis colours differentiated info,error,warn are disappearing
so both the below queries are same right ? but to make colours for the trellis visualization we need to write the first query right?

 1) index="some" | rex field=_raw "^(?:[^\[\n]*\[){2}(P\w+)\]\s+\[(?P<b>\w+)"|rename a as typeofevent b as servername| chart count  by servername typeofevent| eval componentX=servername
               | stats sum(INFO) as INFO sum(WARN) as WARN sum(ERROR) as ERROR by servername component
     2) index="some" | rex field=_raw "^(?:[^\[\n]*\[){2}(P\w+)\]\s+\[(?P<b>\w+)"|rename a as typeofevent b as servername

And in XML its working for the below configuration

<option name="trellis.enabled">1</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
0 Karma
Highlighted

Re: How to choose the different colors for the column chart and the trellis visualization?

Legend

As mentioned in the answer, you would need to set additional configuration for chart for legend to show and field colors to work (besides Trellis Settings). If the following does not work then you would need to share your current chart configurations.

     <option name="charting.legend.placement">bottom</option>
     <option name="charting.fieldColors">{"INFO":0x65A637, "WARN":0xFFBF00, "ERROR":#FF0000}</option>



| eval message="Happy Splunking!!!"


0 Karma