Solved: Pick colours for certain value

cmeerbeek · ‎07-04-2017

I use the timeline app to visualize the state of process running over time.
If the process is not running I want to show a red bar and if it is running I want to use a green bar.

The query works fine, look at attched screenshot.
The data is also fine...other screenshot.

How can I make sure that Running is green and Not Running is red?

niketn · ‎07-04-2017

Custom Visualizations do not allow defining sequential category colors through UI or Simple XML. You would need to override the same through colors CSS. .ccat-<fieldName> is the class name created for SVG ( for example ccat-Running). Field Name containing spaces will result in two CSS class names (for example .ccat-Not.running). I have created a simple CSS however, it would be better you customize CSS selector as per your needs and do not override any of other default CSS selector.

  <html>
    <style>
      .ccat-Not.running{
        fill: rgb(255,0,0);
        stroke:  rgb(255,0,0);
      }
      .ccat-Running{
        fill: rgb(0,255,0);
        stroke: rgb(0,255,0);
      }  
    </style>        
  </html>

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

View solution in original post

niketn · ‎07-04-2017

Custom Visualizations do not allow defining sequential category colors through UI or Simple XML. You would need to override the same through colors CSS. .ccat-<fieldName> is the class name created for SVG ( for example ccat-Running). Field Name containing spaces will result in two CSS class names (for example .ccat-Not.running). I have created a simple CSS however, it would be better you customize CSS selector as per your needs and do not override any of other default CSS selector.

  <html>
    <style>
      .ccat-Not.running{
        fill: rgb(255,0,0);
        stroke:  rgb(255,0,0);
      }
      .ccat-Running{
        fill: rgb(0,255,0);
        stroke: rgb(0,255,0);
      }  
    </style>        
  </html>

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

christianhuber · ‎07-07-2017

I'am having the same issue. But the fill option is ignored. The stroke color works perfect but not the fill.
It still takes the element.style fill color. Any Idea ?

christianhuber · ‎07-07-2017

okay I solved the problem by using the following code, unser if this what you should to in css. But it worked for me.

   <html>
     <style>
       .ccat-Not.running{
         fill: rgb(255,0,0) !important;
         stroke:  rgb(255,0,0);
       }
       .ccat-Running{
         fill: rgb(0,255,0) !important;
         stroke: rgb(0,255,0);
       }  
     </style>        
   </html>

cmeerbeek · ‎07-07-2017

Hi Christian. De fill is overwritten by another CSS. Try to use fill: rgb(255,0,0) !important;
Add !important.

christianhuber · ‎07-07-2017

thank you. my post bellow was submitted at the same time. This worked for me.

Pick colours for certain value

Updated Team Landing Page in Splunk Observability

New! Splunk Observability Search Enhancements for Splunk APM Services/Traces and ...

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