Building for the Splunk Platform

Possible to change color of a TimelineView?

kcnolan13
Communicator

I am building an HTML dashboard that includes a TimelineView component ('splunkjs/mvc/timelineview'), instantiated like so:

var timeline = new TimelineView({
id: 'main-timeline',
managerid: 'reviewTableFetchSearch',
el: $('#main-timeline')
}, {tokens: true}).render();

alt text

I hoped a property like 'charting.seriesColors' or 'charting.fieldColors' might adjust the bar colors, but none of those work here and I haven't seen any documentation on changing the colors of this kind of component in the Splunk Web Framework site.

Is it possible to do so?

1 Solution

@kcnolan13, first off Splunk JS stack TimeLineView is not the same as Timeline Custom Visualization App

TimeLineView is built using canvas using shared JS library. Changing color for histogram displayed is not exposed. So, you can either request an enhancement for TimeLineView to allow changing color or else use Timechart to plot similar view as TimeLineView. Can you please describe which features of TimeLineView do you want to use, which are not available in Timechart?

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

View solution in original post

0 Karma

@kcnolan13, first off Splunk JS stack TimeLineView is not the same as Timeline Custom Visualization App

TimeLineView is built using canvas using shared JS library. Changing color for histogram displayed is not exposed. So, you can either request an enhancement for TimeLineView to allow changing color or else use Timechart to plot similar view as TimeLineView. Can you please describe which features of TimeLineView do you want to use, which are not available in Timechart?

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

kcnolan13
Communicator

Thanks for the definitive answer; that is what I suspected. I mainly just prefer the chart annotations, data labels, and select/deselect animations of TimeLineView over Timechart. But now that I have a definitive answer that the exposed configuration interface is as limited for TimeLineView as I thought, I may pivot to a Timechart instead.

0 Karma

For Splunk Lite the color of TimeLineView is Orange and that for Splunk Enterprise is Green. I was able to find the piece of shared JavaScript code which does this (Timeline.js, splunk_timeline.js CanvasTimeline.js
) . However, changing the seiesColor value did not seem to change the TimeLine color. Instead Splunk instance started complaining about File Integrity issue since the default installed file was modified manually.

If you can request an Enhancement for changing color for TimeLineView that would be great! I am upvoting this question 🙂

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

mayurr98
Super Champion

After configuring what is given in this doc

have you
1) cleared browser cache?
2) restarted the server?
3) did url/en-US/debug/refresh?
4) did url/en-US/_bump?

if you have not then do all these four things and check if you get the visualisation you want
let me know if this helps!

0 Karma

493669
Super Champion

Have you tried to css formatting in application.css

div.FlashTimeline {
     background-color: #fbfbfb;
     border-left-color: #000;
     color: #000;
     border-right-color: #527BA9;
 }

refer https://answers.splunk.com/answers/83191/timeline-css-colors-or-colours.html
https://docs.splunk.com/Documentation/Timeline/1.1.0/TimelineViz/TimelineFormat
also you can use timeline property:

<option name="timeline_app.timeline.useColors">true</option>
<option name="timeline_app.timeline.colorMode = categorical</option>
<option name="timeline_app.timeline.minColor">#6db7c6</option>

refer: https://docs.splunk.com/Documentation/Timeline/1.1.0/TimelineViz/TimelineXML

0 Karma

kcnolan13
Communicator

I saw that post too, but unfortunately it didn't work for me... even after adding CSS !important rules.

Regarding the timeline viz properties, correct me if I'm mistaken, but I believe TimelineViz and TimelineView are actually different things. That being said, I did try a few of those TimelineViz properties, but they had no effect either.

0 Karma

493669
Super Champion

Yes, as @niketnilay also said timeline view and Timeline Custom Visualization app is different. TimelineViz property will be used after installation of Custom Visualization app...have a look on https://splunkbase.splunk.com/app/3120/
After installing this app you’ll find a timeline visualization as an additional item in the visualization picker in Search and Dashboard.

0 Karma
Get Updates on the Splunk Community!

BSides Splunk 2022 - The Call for Papers is now Open!

TLDR; Main Site: https://bsidessplunk.com CFP Site: https://bsidessplunk.com/cfp CFP Opens: December 15th, ...

Sending Metrics to Splunk Enterprise With the OpenTelemetry Collector

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

What's New in Splunk Cloud Platform 9.0.2208?!

Howdy!  We are happy to share the newest updates in Splunk Cloud Platform 9.0.2208! Analysts can benefit ...