Splunk Search

How to customize the view of the values a particular field, in table visualization?

sarvesh_11
Communicator

Hello Splunkers,

I have used unicode characters, to display trend, in my splunk dashboard. BUt the size of those characters are to small to be presented in dashboard.

Is there a way to increase size or to color those icons?

 

sarvesh_11_0-1618815726494.png

 

Labels (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

Try it this way

| eval Trend=if(Trend > 0,mvappend("⬆","",""),if(Trend <0,mvappend("","","⬇"),mvappend("","➡","")))
<html>
<div/>
<style>

div[id^="table1"] td:nth-child(2)  {
font-size: 150% !important;
color: blue !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="0"] {
font-size: 150% !important;
color: red !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="1"] {
font-size: 150% !important;
color: yellow !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="2"] {
font-size: 150% !important;
color: green !important;
}
</style>
</html>

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You can use CSS to override font size and colour

0 Karma

sarvesh_11
Communicator

that will be implemented to complete table.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Does this mean the issue is resolved or do you still need some assistance?

0 Karma

sarvesh_11
Communicator

i am asking how to customize the view of values a particular column in table.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

In your dashboard source, give your table an id and add a "hidden" panel with some CSS in a html block

    <panel depends="$stayhidden$">
      <html>
        <div/>
        <style>
          div[id^="tableColumnBigFont"] td:nth-child(2) {
            font-size: 150% !important;
            color: blue !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="tableColumnBigFont">

sarvesh_11
Communicator

Thanks mate @ITWhisperer ,

it worked.

Just last thing, can we have color segregation, like upward arrow to be of green color, downward red color, likewise?

Since these arrows won't be static, so can't assign color with cell cordinates.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You could evaluate the field and split it into two (or more) multi-values, then apply different styles to each multi-value-index

     <panel depends="$stayhidden$">
      <html>
        <div/>
        <style>
          div[id^="tableColumnBigFont"] td:nth-child(2) div.multivalue-subcell[data-mv-index="0"] {
            font-size: 150% !important;
            color: red !important;
          }
          div[id^="tableColumnBigFont"] td:nth-child(2) div.multivalue-subcell[data-mv-index="1"] {
            font-size: 150% !important;
            color: yellow !important;
          }
          div[id^="tableColumnBigFont"] td:nth-child(2) div.multivalue-subcell[data-mv-index="2"] {
            font-size: 150% !important;
            color: green !important;
          }
        </style>
      </html>
    </panel>
    <panel>
      <table id="tableColumnBigFont">

Then in your search 

| eval Trend=if(Trend&lt;0,mvappend(Trend,"",""),if(Trend&gt;0,mvappend("","",Trend),mvappend("",Trend,"")))
0 Karma

sarvesh_11
Communicator

Tried mvappend, its not working, below is my code:

| eval Trend=case(Trend="0.00","rightward",Trend > 0,"upward",Trend < 0,"downward",1=1,Trend)
| eval Trend=case(Trend=="upward","⬆",Trend=="downward","⬇",Trend=="rightward","➡",1=1,"N/A")
| eval Trend=if(Trend > "⬆",mvappend(Trend,"",""),if(Trend <"⬇",mvappend("","",Trend),if(Trend=="➡",mvappend("","",Trend),mvappend("",Trend,""))))

 

<html>
<div/>
<style>

div[id^="table1"] td:nth-child(2)  {
font-size: 150% !important;
color: blue !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="⬇"] {
font-size: 150% !important;
color: red !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="➡"] {
font-size: 150% !important;
color: yellow !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="⬆"] {
font-size: 150% !important;
color: green !important;
}
</style>
</html>

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try it this way

| eval Trend=if(Trend > 0,mvappend("⬆","",""),if(Trend <0,mvappend("","","⬇"),mvappend("","➡","")))
<html>
<div/>
<style>

div[id^="table1"] td:nth-child(2)  {
font-size: 150% !important;
color: blue !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="0"] {
font-size: 150% !important;
color: red !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="1"] {
font-size: 150% !important;
color: yellow !important;
}
div[id^="table1"] td:nth-child(2) div.multivalue-subcell[data-mv-index="2"] {
font-size: 150% !important;
color: green !important;
}
</style>
</html>
0 Karma

sarvesh_11
Communicator

Thanks @ITWhisperer alot for all your help, it worked 🙂

0 Karma
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...