How to configure single-value dashboard color based on trends?

[sahmed2017]

Hi

Current dashboard trends color are red or green. If the trend is up then color is green otherwise it red (regardless how much % is down.

Can we set the color mode based on percentage of trends? Color should be based on percentage of trends instead of the value.

Example: 0-10% downward trend color should be Yellow.
10-25% downward trend color should be Orange
25% : color should be red.

Here is example of css file that changes the color based on value but I am looking for way to make it based on trends value instead.

https://answers.splunk.com/answers/583539/can-we-set-two-different-colors-for-single-value-a.html

Thanks for help in advance ,

[jyoung1001]

Hi Niket

Just following up on sahmed's post

The dashboard should work like this:

1. The background color of each panel should change depending on the percentage number
2. The panel background color should be red if the percentage is below -4.
3. The panel background color should be green if the percentage is above +4.
4. The panel background color should be gray if the the percentage is between -4 and +4.

However, I'm having trouble understanding your code. For example, what exactly is "floatPercentTrendIN"? Where can I find that and what does it represent?

Any suggestions on how to get the things listed above done?

Best jyoung

[sahmed2017]

Hi Niket

Thank you it worked. Really appreciate your help.

Just two follow up questions:
1. Is there any documentation on how to determine fields? Example to trends value is parsed from this field?

(var floatSingleValueDelta=parseFloat($("#single3 g.single-value-delta text.delta-label").text?

1. I have 32 single value panel on my dashboard to monitor each data source. I can modify the java script to have 32 entry for each panel or can I use for loop etc. Please let me know if I need to create separate questions for this.

[niketn]

@sahmed2017,

1) Refer to my Wiki Talk Topic 2: Overriding Chart Styles using CSS, on how I use Google Chrome Browser Inspector Tool to identify CSS Selector and test and apply CSS override.

2) You can loop through SingleView elements using mvc.Components.getInstances(). Refer to one of older Splunk Answers for iteration approach through jQuery or SplunkJS: https://answers.splunk.com/answers/338663/splunk-6x-dashboard-examples-how-to-apply-cell-ren.html

Also Splunk Web Framework reference for SingleView

[sahmed2017]

Thanks Niket. I will try now and get back.

[niketn · Accepted solution]

@sahmed, based on the details provided in the question seems like you need to color Single Value Result based on Negative Trend and not based on Positive Trend.

Check out the answer below on similar lines with gentimes and random() function, which generates random trends. If the trend is green (positive), single value color is not changed. If the trend is red (negative), Single Value color is applied based on range
0-10% --> Yellow
10-25% --> Orange
25% : --> Red.

Following is the Simple XML Run anywhere Dashboard code:

<dashboard script="single_value_color_by_trend_percent.js">
  <label>Single Value Color based on Trend Percent</label>
  <row>
    <panel>
      <title>single1</title>
      <single id="single1">
        <search>
          <query>| gentimes start=-7
| fields starttime
| eval _time=starttime
| fields - starttime
| eval count=(random()/random())*10</query>
          <earliest>-1s@s</earliest>
          <latest>@s</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[0,70]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <title>single2</title>
      <single id="single2">
        <search>
          <query>| gentimes start=-7
| fields starttime
| eval _time=starttime
| fields - starttime
| eval count=(random()/random())*10</query>
          <earliest>-1s@s</earliest>
          <latest>@s</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[0,70]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel>
      <title>single3</title>
      <single id="single3">
        <search>
          <query>| gentimes start=-7
| fields starttime
| eval _time=starttime
| fields - starttime
| eval count=(random()/random())*10</query>
          <earliest>-1s@s</earliest>
          <latest>@s</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x65a637","0xf7bc38","0xd93f3c"]</option>
        <option name="rangeValues">[0,70]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

Following is the JavaScript file single_value_color_by_trend_percent.js to be placed under the appserver/static folder of your Splunk app:

 require([
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
             mvc
             ) {
     //Function to define range to override colors for Selected Single Value based on Single Value Result
     function OverrideColorRangeByValue(selectedElement,floatPercentTrendIN){
         switch (true) {
             case floatPercentTrendIN>=0 && floatPercentTrendIN<10:
                 selectedElement.css("fill", "yellow");
                 console.log("Yellow: ",floatPercentTrendIN);
                 break;
             case floatPercentTrendIN>=10 && floatPercentTrendIN<25:
                 selectedElement.css("fill", "orange");
                 console.log("Orange: ",floatPercentTrendIN);
                 break;
             case floatPercentTrendIN>=25:
                 selectedElement.css("fill", "red");
                 console.log("Red: ",floatPercentTrendIN);
                 break;
             default:
                 selectedElement.css("fill", "grey");
                 console.log("Grey: ",floatPercentTrendIN);
         }
     }

     //Get Single Value by id=single1 set in SimpleXML <single id="single1">
     mvc.Components.get('single1').getVisualization(function(singleView) {
         singleView.on('rendered', function() {        
             if($("#single1 .single-result").text()!== undefined){
                 //Get the Single Value Result from <text> svg node with class "single-result" and Single Value Trend with class "delta-label"
                 var floatSingleValueResult=parseFloat($("#single1 g.single-value-label text.single-result").text());
                 var floatSingleValueDelta=parseFloat($("#single1 g.single-value-delta text.delta-label").text());
                 console.log("floatSingleValueResult: ",floatSingleValueResult);
                 console.log("floatSingleValueDelta: ",floatSingleValueDelta);
                 if (isNaN(floatSingleValueResult) || isNaN(floatSingleValueDelta)){
                     //Not Numeric, No need to override!
                 }else{
                    if(floatSingleValueDelta>=0){
                        // No Color for Single Result based on positive Trend
                    }else{
                        floatTotal=floatSingleValueResult-floatSingleValueDelta;
                        var floatPercentTrend=(floatSingleValueResult/floatTotal)*100;
                        console.log("floatPercentTrend: ",floatPercentTrend);
                        if(floatPercentTrend!== undefined){
                            OverrideColorRangeByValue($("#single1 .single-result"),floatPercentTrend);
                        }
                    }
                };
            }
        });
    });

     //Get Single Value by id=single2 set in SimpleXML <single id="single2">
    mvc.Components.get('single2').getVisualization(function(singleView) {
        singleView.on('rendered', function() {        
            if($("#single2 .single-result").text()!== undefined){
                //Get the Single Value Result from <text> svg node with class "single-result" and Single Value Trend with class "delta-label"
                var floatSingleValueResult=parseFloat($("#single2 g.single-value-label text.single-result").text());
                var floatSingleValueDelta=parseFloat($("#single2 g.single-value-delta text.delta-label").text());
                console.log("floatSingleValueResult: ",floatSingleValueResult);
                console.log("floatSingleValueDelta: ",floatSingleValueDelta);
                if (isNaN(floatSingleValueResult) || isNaN(floatSingleValueDelta)){
                    //Not Numeric, No need to override!
                }else{
                    if(floatSingleValueDelta>=0){
                        // No Color for Single Result based on positive Trend
                    }else{
                        floatTotal=floatSingleValueResult-floatSingleValueDelta;
                        var floatPercentTrend=(floatSingleValueResult/floatTotal)*100;
                        console.log("floatPercentTrend: ",floatPercentTrend);
                        if(floatPercentTrend!== undefined){
                            OverrideColorRangeByValue($("#single2 .single-result"),floatPercentTrend);
                        }
                    }
                };
            }
        });
    });
    //Get Single Value by id=single3 set in SimpleXML <single id="single3">    
    mvc.Components.get('single3').getVisualization(function(singleView) {
        singleView.on('rendered', function() {        
            if($("#single3 .single-result").text()!== undefined){
                //Get the Single Value Result from <text> svg node with class "single-result" and Single Value Trend with class "delta-label"
                var floatSingleValueResult=parseFloat($("#single3 g.single-value-label text.single-result").text());
                var floatSingleValueDelta=parseFloat($("#single3 g.single-value-delta text.delta-label").text());
                console.log("floatSingleValueResult: ",floatSingleValueResult);
                console.log("floatSingleValueDelta: ",floatSingleValueDelta);
                if (isNaN(floatSingleValueResult) || isNaN(floatSingleValueDelta)){
                     //Not Numeric, No need to override!
                }else{
                    if(floatSingleValueDelta>=0){
                        // No Color for Single Result based on positive Trend
                    }else{
                        floatTotal=floatSingleValueResult-floatSingleValueDelta;
                        var floatPercentTrend=(floatSingleValueResult/floatTotal)*100;
                        console.log("floatPercentTrend: ",floatPercentTrend);
                        if(floatPercentTrend!== undefined){
                            OverrideColorRangeByValue($("#single3 .single-result"),floatPercentTrend);
                        }
                    }
                };
            }
        });
    });
 });

PS: Since this change requires static file, you may need to refresh/restart/bump your Splunk instance and also clear out internet browser history of required.

Please try out and confirm!

[adonio]

maybe have the search generate the final result in the form of a number between -100 - 100
than you can specify the ranges in your single value color configurations