All Apps and Add-ons

Setting FlashChart Line Color Based on Pulldown Label

David
Splunk Employee
Splunk Employee

I traditionally set the color of a line on a FlashChart via the charting.fieldColors option. But in this scenario, I'm setting the name of the field being charted dynamically via a PullDown. I could hard-code all possible results, but it would be 62 field/color pairings for this use case.

Is it possible to set this dynamically? I tried tossing a $PullDown.label$ into the charting.fieldColors, but to no avail. Any other way?

1 Solution

sideview
SplunkTrust
SplunkTrust

This is possible, but the HiddenChartFormatter module doesnt do any token replacement, so you have to use the techniques available with the Sideview Utils modules -- Pulldown, ValueSetter and ResultsValueSetter.

1) To start small, if the colors were themselves the 'value' of the Pulldown, it's a simple matter of giving the Pulldown a name param of "charting.seriesColors", and using the template param and/or the eval search command to make sure the individual values will look like the string-valued seriesColors values when the FlashChart gets them. (note seriesColors instead of fieldColors cause it's probably be easier in that case to use the array)

2) What you need and what you're talking about here, I think is for the user to pick a field like 'foo', and for foo always draw the line blue, and then when the user picks the field 'bar', always draw it green, etc.

I'm assuming your main practical goal is to just avoid pasting in the giant wob of fields and colors into every dashboard in your app (an admirable goal). It's very unfortunate that there is still no way to 'include some external view xml' from within view xml, but it is possible to use ResultsValueSetter to do a strange workaround. Put the entire thing in a macro, in the form of

| stats count | eval charting.fieldColors="{ critical:0xD25B3B, failed:0xB82305, success:0x54C410}"

the leading stats count will just create a single empty row, then you can 'paint' the value(s) you need on with eval. Then have a SearchModule run this search, put a ResultsValueSetter downstream from it, configure ResultsValueSetter with it's fields param set to the 'charting.fieldColors' field (and any other fields if you've painted more than one). The FlashChart doesnt know the difference between hardcoded charting keys and charting keys that were 'pulled through the curtain' like this, so you're done.

The end result:

[[your pulldown module up here]]
  <module name="Search">
    <param name="search">`get_my_colors`</param>
    <module name="ResultsValueSetter">
      <param name="fields">charting.fieldColors</param>
      [[ here you put the Search module that would feed the FlashChart]]
      [[ and then the FlashChart itself]]

3) Just for fun, you could get slightly fancier, and put all the pairings in a lookup, each to a row, with a 'field' and a 'hexcolor' column. the values of hexcolor would be like '98AFCF'.

Then underneath the pulldown have a Search module with a search like

| inputlookup fieldcolors | where field="$field$" | fields hexcolor | eval hexcolor="[0x"+hexcolor+"] | rename hexcolor as charting.seriesColors

Then underneath that, have a ResultsValueSetter module that goes and gets the 'charting.seriesColors' field and turns it into a regular key in the UI.

Then the FlashChart will just see the single key and flip the color accordingly each time.

ResultsValueSetter is really weird but it's good for weird little trickery like this. It's extremely useful where you have a single subsearch that you need to run on a page, but you want to apply the output of that subsearch to more than one search in the page... Normally you'd have to resign yourself to running that subsearch N times, but at least in single-row-subsearch cases, ResultsValueSetter can 'pull it through the curtain' and turn your value(s) into plain old UI keys to plug in wherever you like.

View solution in original post

sideview
SplunkTrust
SplunkTrust

This is possible, but the HiddenChartFormatter module doesnt do any token replacement, so you have to use the techniques available with the Sideview Utils modules -- Pulldown, ValueSetter and ResultsValueSetter.

1) To start small, if the colors were themselves the 'value' of the Pulldown, it's a simple matter of giving the Pulldown a name param of "charting.seriesColors", and using the template param and/or the eval search command to make sure the individual values will look like the string-valued seriesColors values when the FlashChart gets them. (note seriesColors instead of fieldColors cause it's probably be easier in that case to use the array)

2) What you need and what you're talking about here, I think is for the user to pick a field like 'foo', and for foo always draw the line blue, and then when the user picks the field 'bar', always draw it green, etc.

I'm assuming your main practical goal is to just avoid pasting in the giant wob of fields and colors into every dashboard in your app (an admirable goal). It's very unfortunate that there is still no way to 'include some external view xml' from within view xml, but it is possible to use ResultsValueSetter to do a strange workaround. Put the entire thing in a macro, in the form of

| stats count | eval charting.fieldColors="{ critical:0xD25B3B, failed:0xB82305, success:0x54C410}"

the leading stats count will just create a single empty row, then you can 'paint' the value(s) you need on with eval. Then have a SearchModule run this search, put a ResultsValueSetter downstream from it, configure ResultsValueSetter with it's fields param set to the 'charting.fieldColors' field (and any other fields if you've painted more than one). The FlashChart doesnt know the difference between hardcoded charting keys and charting keys that were 'pulled through the curtain' like this, so you're done.

The end result:

[[your pulldown module up here]]
  <module name="Search">
    <param name="search">`get_my_colors`</param>
    <module name="ResultsValueSetter">
      <param name="fields">charting.fieldColors</param>
      [[ here you put the Search module that would feed the FlashChart]]
      [[ and then the FlashChart itself]]

3) Just for fun, you could get slightly fancier, and put all the pairings in a lookup, each to a row, with a 'field' and a 'hexcolor' column. the values of hexcolor would be like '98AFCF'.

Then underneath the pulldown have a Search module with a search like

| inputlookup fieldcolors | where field="$field$" | fields hexcolor | eval hexcolor="[0x"+hexcolor+"] | rename hexcolor as charting.seriesColors

Then underneath that, have a ResultsValueSetter module that goes and gets the 'charting.seriesColors' field and turns it into a regular key in the UI.

Then the FlashChart will just see the single key and flip the color accordingly each time.

ResultsValueSetter is really weird but it's good for weird little trickery like this. It's extremely useful where you have a single subsearch that you need to run on a page, but you want to apply the output of that subsearch to more than one search in the page... Normally you'd have to resign yourself to running that subsearch N times, but at least in single-row-subsearch cases, ResultsValueSetter can 'pull it through the curtain' and turn your value(s) into plain old UI keys to plug in wherever you like.

View solution in original post

David
Splunk Employee
Splunk Employee

Alright. Looks like I've got some fun times ahead of me!

0 Karma
.conf21 CFS Extended through 5/20!

Don't miss your chance
to share your Splunk
wisdom in-person or
virtually at .conf21!

Call for Speakers has
been extended through
Thursday, 5/20!