Dashboards & Visualizations

How to change color of pie chart after text or dropdown input change

daniaf
Observer

I'm creating a dashboard that have 3 pie charts where the values for each pie chart are color-coded: green for Comply, red for Not Comply and yellow for Not Supported. 

I also created 2 text inputs and 3 dropdown inputs. The text input will allow user to input hostname or IP address and the pie chart will return the results of the compliance tied to the hostname or IP address with the right color code.

And the dropdown inputs will allow user to select "Comply", "Not Comply" or "Not Supported". When the user selects "Not comply", the pie chart should be red, but instead it is still green because the colors apply to the series from left to right so I get the first color. Is there a way to make the colors apply accordingly after text/dropdown input change?

The XML looks like this: 

 

<form version="1.1">
  <label>Overview</label>
  <search id="base">
    <query>
      | savedsearch Overview
      | search Hostname="$field1$" "IP Address"="$field2$" OS="$field3$" "ABC Compliance"="$field5$" "DEF Compliance"="$field6$" "GHI Compliance"="$field8$"
    </query>
    <earliest>-3d@d</earliest>
    <latest>now</latest>
    <sampleRatio>1</sampleRatio>
  </search>
  <fieldset submitButton="true">
    <input type="text" token="field1" searchWhenChanged="true">
      <label>Hostname</label>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="text" token="field2" searchWhenChanged="true">
      <label>IP Address</label>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="dropdown" token="field3">
      <label>OS</label>
      <choice value="*">All</choice>
      <default>*</default>
      <initialValue>*</initialValue>
      <fieldForLabel>OS</fieldForLabel>
      <fieldForValue>OS</fieldForValue>
      <search>
        <query>| savedsearch Overview
        | stats count by OS</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="field5">
      <label>ABC Compliance</label>
      <choice value="*">All</choice>
      <fieldForLabel>ABC Compliance</fieldForLabel>
      <fieldForValue>ABC Compliance</fieldForValue>
      <search>
        <query>| savedsearch Overview
| stats count by "ABC Compliance"</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="dropdown" token="field6">
      <label>DEF Compliance</label>
      <choice value="*">All</choice>
      <default>*</default>
      <initialValue>*</initialValue>
      <fieldForLabel>DEF Compliance</fieldForLabel>
      <fieldForValue>DEF Compliance</fieldForValue>
      <search>
        <query>| savedsearch Overview
| stats count by "DEF Compliance"</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
    </input>
    <input type="dropdown" token="field8">
      <label>GHI Compliance</label>
      <choice value="*">All</choice>
      <default>*</default>
      <initialValue>*</initialValue>
      <fieldForLabel>GHI Compliance</fieldForLabel>
      <fieldForValue>GHI Compliance</fieldForValue>
      <search>
        <query>| savedsearch Overview
| stats count by "GHI Compliance"</query>
        <earliest>-7d@h</earliest>
        <latest>now</latest>
      </search>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <title>ABC Compliance</title>
        <search>
          <query>| savedsearch Overview
| search Hostname="$field1$" "IP Address"="$field2$" OS="$field3$" "ABC Compliance"="$field5$" "DEF Compliance"="$field6$" "GHI Compliance"="$field8$"
| rename "ABC Compliance" as Compliance
| stats count by Compliance
| eval Compliance=Compliance." (".count.")"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.labels">["Comply","Not Comply","Not Supported"]</option>
        <option name="charting.seriesColors">[0x70db70,0xff4d4d,0xffff66]</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>DEF Compliance</title>
        <search>
          <query>| savedsearch Overview
| search Hostname="$field1$" "IP Address"="$field2$" OS="$field3$" "ABC Compliance"="$field5$" "DEF Compliance"="$field6$" "GHI Compliance"="$field8$"
| rename "DEF Compliance" as Compliance
| stats count by Compliance
| eval Compliance=Compliance." (".count.")"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.legend.labels">["Comply","Not Comply","Not Supported"]</option>
        <option name="charting.seriesColors">[0x70db70,0xff4d4d,0xffff66]</option>
      </chart>
    </panel>
    <panel>
      <chart>
        <title>GHI Compliance</title>
        <search>
          <query>| savedsearch Overview
| search Hostname="$field1$" "IP Address"="$field2$" OS="$field3$" "ABC Compliance"="$field5$" "DEF Compliance"="$field6$" "GHI Compliance"="$field8$"
| rename "GHI Compliance" as Compliance
| stats count by Compliance
| eval Compliance=Compliance." (".count.")"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <option name="charting.legend.labels">["Comply","Not Comply","Not Supported"]</option>
        <option name="charting.seriesColors">[0x70db70,0xff4d4d,0xffff66]</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <title>Host Summary</title>
      <table>
        <search base="base">
          <query>| table Hostname, "IP Address", OS, "ABC Compliance", "DEF Compliance", "GHI Compliance"</query>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <format type="color" field="ABC Compliance">
          <colorPalette type="map">{"Comply":#70db70,"Not Comply":#ff4d4d, "Not Supported":#ffff66}</colorPalette>
        </format>
        <format type="color" field="DEF Compliance">
          <colorPalette type="map">{"Comply":#70db70,"Not Comply":#ff4d4d, "Not Supported":#ffff66}</colorPalette>
        </format>
        <format type="color" field="GHI Compliance">
          <colorPalette type="map">{"Comply":#70db70,"Not Comply":#ff4d4d, "Not Supported":#ffff66}</colorPalette>
        </format>
      </table>
    </panel>
  </row>
</form>

 

 

 

 

Labels (4)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You could try using a token to define the series colours. You could set the token in the done handler of the search used for the pie chart such that the right colours are used based on the values present in the results.

0 Karma
Get Updates on the Splunk Community!

Join Us for Splunk University and Get Your Bootcamp Game On!

If you know, you know! Splunk University is the vibe this summer so register today for bootcamps galore ...

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

.conf24 is taking place at The Venetian in Las Vegas from June 11 - 14. Continue reading to learn about the ...

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...