topic Re: Change timeline resource category color in All Apps and Add-ons

Change timeline resource category color

doronca — Sun, 14 Jul 2019 16:04:08 GMT

Hi Splunkers,

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

Thanks,
Doron

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 06:10:53 GMT

Can you give some more inputs?

U can also refer to https://answers.splunk.com/answers/506607/using-timeline-visulations-can-i-get-the-colors-to.html

Re: Change timeline resource category color

doronca — Mon, 15 Jul 2019 06:21:02 GMT

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>

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 09:32:51 GMT

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.

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 09:35:29 GMT

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

Re: Change timeline resource category color

doronca — Mon, 15 Jul 2019 09:37:40 GMT

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

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 09:50:47 GMT

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

Re: Change timeline resource category color

doronca — Mon, 15 Jul 2019 10:05:24 GMT

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

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 10:26:16 GMT

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?

Re: Change timeline resource category color

doronca — Mon, 15 Jul 2019 10:29:21 GMT

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

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 10:29:56 GMT

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

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 10:32:22 GMT

Can you try moving that line before /viz

Re: Change timeline resource category color

doronca — Mon, 15 Jul 2019 10:37:47 GMT

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?

Re: Change timeline resource category color

venkasplunk — Mon, 15 Jul 2019 11:07:37 GMT

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

What version are you referring to?

Re: Change timeline resource category color

niketn — Mon, 15 Jul 2019 11:15:31 GMT

@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

Re: Change timeline resource category color

doronca — Tue, 16 Jul 2019 08:13:36 GMT

Thanks for the answer.