Dashboards & Visualizations

change bar chart color based on value

nemal
New Member

Hi,

I am trying to change values in a standard bar chart based on threshold values. I have tried following some other documents
http://splunk-base.splunk.com/answers/58335/change-chart-bar-color-based-on-data-value and tried rangemap around this area but have not been able to successfully implement it in my charts.

Here is the XML code:

<?xml version='1.0' encoding='utf-8'?>
<dashboard>
  <label>SQL Dashboard</label>
  <row>
    <chart>
      <searchString>index=perf collection="Processor Information" counter counter="% Processor Time" host="LIVE2012SQL01" | stats Max(Value) AS Percent </searchString>
      <title>SQL CPU</title>
      <earliestTime>-1m</earliestTime>
      <latestTime>now</latestTime>
      <option name="charting.chart">fillerGauge</option>
      <option name="charting.chart.rangeValues">[0,14,30,50]</option>
      <option name="charting.chart.style">shiny</option>
      <option name="charting.gaugeColors">[0x84e900,0xffe800,0xbf3030]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
    <chart>
      <searchName>SQL Page File Usage</searchName>
      <title>Page File Usage</title>
      <option name="charting.chart">column</option>
      <option name="charting.chart.rangeValues">[0,0.5,2,5]</option>
      <option name="charting.gaugeColors">[0x84e900,0xffe800,0xbf3030]</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
      <option name="drilldown">all</option>
      <option name="maxLines">10</option>
      <option name="segmentation">outer</option>
      <option name="softWrap">true</option>
    </chart>
    <chart>
      <searchName>SQL Mem Usage</searchName>
      <title>SQL Memory Usage (Physical RAM + Virtual RAM)</title>
      <option name="charting.chart">column</option>
      <option name="charting.chart.stackMode">default</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
  </row>
  <row>
    <chart>
      <searchName>SQL Stats 1</searchName>
      <title>SQL Stats</title>
      <option name="charting.chart">column</option>
      <option name="charting.chart.nullValueMode">zero</option>
      <option name="charting.chart.stackMode">default</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
    <chart>
      <searchName>SQL Tran Log Usage</searchName>
      <title>SQL Transaction Logs</title>
      <option name="charting.chart">bar</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="dataOverlayMode">highlow</option>
      <option name="displayRowNumbers">true</option>
    </chart>
    <chart>
      <searchString>index=sqlperf counter="Page life expectancy" NOT _Total | sort - Value | top limit=10000 Value by counter | stats max(Value) by counter
</searchString>
      <title>SQL Performance</title>
      <earliestTime>-5m</earliestTime>
      <latestTime>now</latestTime>
      <option name="charting.axisTitleX.text">Meseaure</option>
      <option name="charting.axisTitleY.text">Value</option>
      <option name="charting.chart">column</option>
      <option name="charting.primaryAxisTitle.text"/>
      <option name="charting.secondaryAxisTitle.text"/>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
      <option name="maxLines">10</option>
      <option name="segmentation">outer</option>
      <option name="softWrap">true</option>
    </chart>
  </row>
  <row>
    <chart>
      <searchString>index=sqlperf collection="SQLServer:General Statistics" counter="User Connections"  | stats count AS Total by counter rangemap field=count low=0-5 elevated=6-10 default=severe</searchString>
      <title>SQL User Connections </title>
      <earliestTime>-1m</earliestTime>
      <latestTime>now</latestTime>
      <option name="charting.chart">column</option>
      <option name="charting.chart.stackMode">default</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
    <chart>
      <searchString>sourcetype="WinEventLog:Application" BlinkBox.DatabaseTimeoutException host="liveweb*"  | stats count AS Total</searchString>
      <title>SQL Timeouts</title>
      <earliestTime>-1m</earliestTime>
      <latestTime>now</latestTime>
      <option name="charting.chart">radialGauge</option>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
    <chart>
      <searchName>SQL Disk Status</searchName>
      <title>SQL Disk Status</title>
      <option name="charting.axisTitleY.text">milliseconds (ms)</option>
      <option name="charting.chart">column</option>
      <option name="charting.secondaryAxisTitle.text"/>
      <option name="charting.seriesColors">[0x66CC66]</option>
      <option name="count">10</option>
      <option name="displayRowNumbers">true</option>
    </chart>
  </row>
</dashboard>

Here is a an example of a search which is a bar chart in my dashboard.

index=sqlperf collection="SQLServer:General Statistics" counter="User Connections"  
| stats count AS Total by counter

Thanks

Tags (1)
0 Karma

cramasta
Builder

By default the newer version of Splunk uses HTML5 to render the charts. This makes them viewable on IOS devices. However this breaks some features like custom colors. You will need to force your dashboard to render using Flash. To do this you need to switch to advanced XML and make some changes(I did not see a way in simple xml to do this yet.)

Steps.

1) Launch your dashboard.

2) At the end of the URL in your browser add ?showsource=1

localhost:8000/en-US/app/search/YourDashboard?showsource=1

3) scroll to the bottom and you will see a XML text box with the advanced XML in it. Copy the advanced XML.

4) Create a new dashboard and paste in the advanced XML. Look for the sections in the advanced XML for the panels that you defined custom colors for (it will looks similar to the simple xml) and find where it says JSChart and replace it with FlashChart.

5) Save the dashboard. Colors should now show up.

0 Karma

lguinn2
Legend

Hi - this is an awful lot of XML for us to go through and try to understand. Can you make a shorter dashboard, perhaps with just one chart, that we can use as a example? If we can work through the problem with one chart, I think you will be able to expand the solution to other charts.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...