Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question

How to change the background color of a radial gauge chart?

chvenu17
Path Finder
‎03-29-2018 05:51 AM

We display multiple Radial gauge charts in the dashboard, so to clearly distinguish the "Red" color chart from other, I want to change the background color of Radial gauge also to turn red

Example
My range count as below
0 to 1000 --> Green
1000 to 2000 --> Yellow
2000 to 6000 --> Red

My Requirement is: when the count is 3000 my Radial gauge chart's background color should also turn red or at least some part of it.

0 Karma
Reply

niketn
Legend
‎04-04-2018 12:34 AM

@chvenu17, for changing Radial Gauge Data Label or Background Color Dynamically you would need to ensure that the radial gauge renders only after color has bee decided. I tried using JavaScript but sometimes chart rendered first before stats could be generated and hence the CSS color override through JavaScript did not work as expected.

Following is a completely different approach to change Radial Gauge Data Label Font Color based on range using <html> <panel> and positioning the same over the Radial Gauge using CSS Override. Please try out and confirm.

alt text

PS: As this example uses CSS based position oevrride, you might have to left CSS Style based on number of Radial gauges/Width of Panels.

<form>
  <label>Radial Gauge Color</label>
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row depends="$alwaysHideCSSHTMLPanel$">
    <panel>
      <html>
        <style>
          .radialGaugeDataLabel {
            position: absolute;
            top:-55px;
            left: 41%;
            width: 90px;
            font-size: 150%;
            background: black;
            color: white;
            text-align: center;
          }
          #firstRadialGaugeLabel{
            color:$tokFirstColor$;
          }
          #secondRadialGaugeLabel{
            color:$tokSecondColor$;
          }
          #thirdRadialGaugeLabel{
            color:$tokThirdColor$;
          }
          #radialGauge div div svg  text:last-child{
            visibility:hidden !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>First Radial Gauge</title>
      <input type="text" token="tokFirstRadialGaugeValue" searchWhenChanged="true">
        <label>Enter Test Value</label>
        <default>500</default>
      </input>
      <chart>
        <search>
          <query>| makeresults
| eval value=$tokFirstRadialGaugeValue$
| table value</query>
          <progress>
            <set token="tokFirst">$result.value$</set>
            <eval token="tokFirstColor">case($result.value$>=0 AND $result.value$<1000,"#7e9f44",$result.value$>=1000 AND $result.value$<2000,"#FFE800",$result.value$>=2000,"#d13b3b")</eval>
          </progress>
        </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.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">radialGauge</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.rangeValues">[0,1000,2000,6000]</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.gaugeColors">["0x7e9f44","0xFFE800","0xd13b3b"]</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">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
      <html depends="$tokFirstColor$">
        <div id="firstRadialGaugeLabel" class="radialGaugeDataLabel">$tokFirst$</div>
      </html>
    </panel>
    <panel>
      <title>Second Radial Gauge</title>
      <input type="text" token="tokSecondRadialGaugeValue" searchWhenChanged="true">
        <label>Enter Test Value</label>
        <default>3500</default>
      </input>
      <chart>
        <search>
          <query>| makeresults
| eval value=$tokSecondRadialGaugeValue$
| table value</query>
          <progress>
            <set token="tokSecond">$result.value$</set>
            <eval token="tokSecondColor">case($result.value$>=0 AND $result.value$<1000,"#7e9f44",$result.value$>=1000 AND $result.value$<2000,"#FFE800",$result.value$>=2000,"#d13b3b")</eval>
          </progress>
        </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.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">radialGauge</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.rangeValues">[0,1000,2000,6000]</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.gaugeColors">["0x7e9f44","0xFFE800","0xd13b3b"]</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">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
      <html depends="$tokSecondColor$">
        <div id="secondRadialGaugeLabel" class="radialGaugeDataLabel">$tokSecond$</div>
      </html>
    </panel>
    <panel>
      <title>Third Radial Gauge</title>
      <input type="text" token="tokThirdRadialGaugeValue" searchWhenChanged="true">
        <label>Enter Test Value</label>
        <default>1800</default>
      </input>
      <chart>
        <search>
          <query>| makeresults
| eval value=$tokThirdRadialGaugeValue$
| table value</query>
          <progress>
            <set token="tokThird">$result.value$</set>
            <eval token="tokThirdColor">case($result.value$>=0 AND $result.value$<1000,"#7e9f44",$result.value$>=1000 AND $result.value$<2000,"#FFE800",$result.value$>=2000,"#d13b3b")</eval>
          </progress>
        </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.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">radialGauge</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.rangeValues">[0,1000,2000,6000]</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.gaugeColors">["0x7e9f44","0xFFE800","0xd13b3b"]</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">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
      <html depends="$tokThirdColor$">
        <div id="thirdRadialGaugeLabel" class="radialGaugeDataLabel">$tokThird$</div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
1 KB
Reply

niketn
Legend
‎03-31-2018 09:08 AM

@chvenu17 does your dashboard have multiple radial gauge panels or single panel with multiple radial gauges created through Trellis?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply

chvenu17
Path Finder
‎04-02-2018 03:24 AM

My Dashboard is having multiple radial gauge panels

0 Karma
Reply

deepashri_123
Motivator
‎03-30-2018 10:40 PM

Hey@chvenu17,

Try referring this answer :
https://answers.splunk.com/answers/227198/use-rangemap-to-change-color-of-whole-panel.html

let me know if this helps!!

0 Karma
Reply
Get Updates on the Splunk Community!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...