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!

Splunk Community Platform Survey

Hey Splunk Community, Starting today, the community platform may prompt you to participate in a survey. The ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...

Avoid Certificate Expiry Issues in Splunk Enterprise with Certificate Assist

This blog post is part 2 of 4 of a series on Splunk Assist. Click the links below to see the other ...