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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...