Dashboards & Visualizations

How do you apply a background color to a single value panel?

DataOrg
Builder

I need to apply a background color to a single value panel. Please help me in modifying below javascript.
The current code applies color to value but i need to apply it on the panel background .
@niketnilay @Ayn . pls help

 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,singleValueResultIN){
             switch (true) {
                 case singleValueResultIN>=0 && singleValueResultIN<5.9:
                     selectedElement.css("fill", "green");
                     break;
                 case singleValueResultIN>=6 && singleValueResultIN<6.9:
                     selectedElement.css("fill", "yellow");
                     break;
                 case singleValueResultIN>=7.0:
                     selectedElement.css("fill", "red");
                     break;
                 default:
                     selectedElement.css("fill", "grey");
             }
         }

         //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"
                     singleValueResult=parseFloat($("#single1 .single-result").text());
                     OverrideColorRangeByValue($("#single1 .single-result"),singleValueResult);
                 }
             });
         });
         //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"
                     singleValueResult=parseFloat($("#single2 .single-result").text());
                     OverrideColorRangeByValue($("#single2 .single-result"),singleValueResult);
                 }
             });
         });
         //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"
                     singleValueResult=parseFloat($("#single3 .single-result").text());
                     OverrideColorRangeByValue($("#single3 .single-result"),singleValueResult);
                 }
             });
         });    
     });
0 Karma

niketn
Legend

@premranjithj seems like the data you are representing in Single Value is Version kind of information where final subversion is not absolutely mandatory to be validated.

So following are your two options

1) Use string comparison for Versions for example the following (you have to be careful that string comparison may not work well with jumbled data and that it is different from numeric comparison)

  `case singleValueResultIN>="6" && singleValueResultIN<"6.9":`

2) The value that gets passed for applying color based on range should be truncated to retain only Version and Subversion and no further denominator i.e. Use regex based expression in JavaScript to break 1.2.35 as 1.2 for numeric comparison. Anyways you are not taking any special decision based on sub-sub-version 35 :). If you can truncate the final decimal portion your Version will be treated as floating number and should work.

Please try out either one of the approach and confirm! Please let us know if you need further help!

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

msivill_splunk
Splunk Employee
Splunk Employee

An alternative could be to use one of the following Custom visualizations from Splunkbase rather than javascript route.

Either of the following should be able to do what you are asking for.

0 Karma

DataOrg
Builder

@msivill . My problem is my single value is string . So I couldn't see it. That's what I need help in doing with JavaScript

0 Karma

msivill_splunk
Splunk Employee
Splunk Employee

Yes, I'm not suggesting a fix for the Javascript but providing an alternative solution which I think will get you to the same result without the javascript management overhead.

0 Karma

DataOrg
Builder

@msivill my problem is not javascript and my value in single value panel is "1.2.35" and color is not applying to the panel. help me to fix it
the value is not constant and it keep on changing

0 Karma

msivill_splunk
Splunk Employee
Splunk Employee

I'm doing some guessing as there isn't much detail. In your response you say javascript is not the problem, but in the original question you ask to fix the javascript.

Does 1.2.35 produce a grey background? 1.2.35 is not a number so the javascript logic (in OverrideColorRangeByValue) might have a problem here. Can the value 1.2.35 be converted (in SPL) into a correct number such as 1.2 for example.

To my original response if you want to control background panel colours with text (string/number) on the top then the 2 visualisations mentioned may be able to help.

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...