All Apps and Add-ons

Pick colours for certain value

cmeerbeek
Path Finder

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. alt text
The data is also fine...other screenshot. alt text

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

1 Solution

niketn
Legend

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>

alt text

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

View solution in original post

niketn
Legend

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>

alt text

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

christianhuber
Path Finder

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 ?

0 Karma

christianhuber
Path Finder

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>
0 Karma

cmeerbeek
Path Finder

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

christianhuber
Path Finder

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

0 Karma
Get Updates on the Splunk Community!

New Splunk Observability innovations: Deeper visibility and smarter alerting to ...

You asked, we delivered. Splunk Observability Cloud has several new innovations giving you deeper visibility ...

Synthetic Monitoring: Not your Grandma’s Polyester! Tech Talk: DevOps Edition

Register today and join TekStream on Tuesday, February 28 at 11am PT/2pm ET for a demonstration of Splunk ...

Instrumenting Java Websocket Messaging

Instrumenting Java Websocket MessagingThis article is a code-based discussion of passing OpenTelemetry trace ...