All Apps and Add-ons

Change timeline resource category color

doronca
Explorer

Hi Splunkers,

Is it possible to choose the color of categories in a timeline? I would like to map color to category

Thanks,
Doron

1 Solution

niketn
Legend

@doronca for timeline custom visualization series color change, you will have to CSS override.
Refer to my older answer on similar use case: https://answers.splunk.com/answers/552658/pick-colours-for-certain-value.html

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

View solution in original post

0 Karma

niketn
Legend

@doronca for timeline custom visualization series color change, you will have to CSS override.
Refer to my older answer on similar use case: https://answers.splunk.com/answers/552658/pick-colours-for-certain-value.html

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

doronca
Explorer

Thanks for the answer.

0 Karma

venkasplunk
New Member

Hi,

Got u.

Try this. If ok pls accept my answer.

option name="charting.fieldColors"
{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}
/option

Ignoring the <> before option, because its not working, please check.

0 Karma

venkasplunk
New Member

{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}

0 Karma

doronca
Explorer

Hi,
Where and how exactly should I use this color mapping?

0 Karma

venkasplunk
New Member

Just posted the answer again, some how if i use <> the option is getting removed.

0 Karma

doronca
Explorer

Thanks, seems like the issue still exists. The colors stays the same as before.

0 Karma

venkasplunk
New Member

Can you paste your code here? For me its working.

I used ur color coding and for me its showing nice colors, For ex: ur critical is red? Low is green?

0 Karma

venkasplunk
New Member

Do take a note that its case sensitive, if your severity is High use High and dont use high

0 Karma

venkasplunk
New Member

Can you try moving that line before /viz

0 Karma

doronca
Explorer

you mean something like:

    <panel>
     <option name="charting.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>
      <viz type="timeline_app.timeline">
        <title>Timeline</title>
        <search>
          <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | bin span=1m _time | search severity="$tok_severity$" | table _time alert severity</query>
          <earliest>$global_time.earliest$</earliest>
          <latest>$global_time.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <refresh>10m</refresh>
          <refreshType>delay</refreshType>
        </search>
        <option name="refresh.display">progressbar</option>
        <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
        <option name="timeline_app.timeline.colorMode">categorical</option>
        <option name="timeline_app.timeline.maxColor">#DA5C5C</option>
        <option name="timeline_app.timeline.minColor">#FFE8E8</option>
        <option name="timeline_app.timeline.numOfBins">5</option>
        <option name="timeline_app.timeline.tooltipTimeFormat">SECONDS</option>
        <option name="timeline_app.timeline.useColors">1</option>
      </viz>
    </panel>

still doesnt work.. can you copy in the version that worked for you?

0 Karma

venkasplunk
New Member

No , i meant the last /viz. Below the timeline_app.timeline.useColors.

What version are you referring to?

0 Karma

doronca
Explorer
<panel>
  <viz type="timeline_app.timeline">
    <title>Timeline</title>
    <search>
      <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | bin span=1m _time | search severity="$tok_severity$" | table _time alert severity</query>
      <earliest>$global_time.earliest$</earliest>
      <latest>$global_time.latest$</latest>
      <sampleRatio>1</sampleRatio>
      <refresh>10m</refresh>
      <refreshType>delay</refreshType>
    </search>
    <option name="refresh.display">progressbar</option>
    <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.colorMode">categorical</option>
    <option name="timeline_app.timeline.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>
    <option name="timeline_app.timeline.maxColor">#DA5C5C</option>
    <option name="timeline_app.timeline.minColor">#FFE8E8</option>
    <option name="timeline_app.timeline.numOfBins">5</option>
    <option name="timeline_app.timeline.tooltipTimeFormat">SECONDS</option>
    <option name="timeline_app.timeline.useColors">1</option>
  </viz>
</panel>

I tried both with:

<option name="timeline_app.timeline.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>

and:

<option name="charting.fieldColors">{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}</option>
0 Karma

venkasplunk
New Member
0 Karma

doronca
Explorer

Hi, thanks for replying.
I saw the post you've shared, but it's not 100% solving my problem.

The search below produces a timeline divided into 5 different severity categories that are randomly mapped to color. what I am trying to do is set the categories as follows:

Color-mapping:
{"informational":#5378AD,"low":#98BF3B,"medium":#F0BE1B,"high":#FF8800,"critical":#D25B3B}

Search:

<panel>
  <viz type="timeline_app.timeline">
    <title>Timeline</title>
    <search>
      <query>| `all_alerts` | rename priority as severity | stats count by _time, alert, severity | table _time alert severity</query>
      <earliest>$global_time.earliest$</earliest>
      <latest>$global_time.latest$</latest>
      <sampleRatio>1</sampleRatio>
      <refresh>10m</refresh>
      <refreshType>delay</refreshType>
    </search>
    <option name="refresh.display">progressbar</option>
    <option name="timeline_app.timeline.axisTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.colorMode">categorical</option>
    <option name="timeline_app.timeline.numOfBins">5</option>
    <option name="timeline_app.timeline.tooltipTimeFormat">DAYS</option>
    <option name="timeline_app.timeline.useColors">1</option>
  </viz>
</panel>
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, ...