Multiple Timeline graphs on a single webpage Javascript SDK

[jenks22222]

I am attempting to display multiple timeline graphs on the same webpage via the JavaScript SDK. The first graph shows up, but the second one does not. In firebug, I can see both jobs get created, but only div id timeline-container0 is populated by a timeline graph. I wasn't sure if I am overwriting a variable or there is some type of race condition going on..... any insight would be greatly appreciated.

Code:

<link href="/examples/browser/resources/bootstrap.css" rel="stylesheet">
<link href="/examples/browser/resources/prettify.css" type="text/css" rel="stylesheet" />
<link href="/examples/browser/resources/timeline.css" type="text/css" rel="stylesheet" />

<style type="text/css">

timeline-container0 {

height: 250px;
width: 500px;
}

timeline-container1 {

height: 250px;
width: 500px;
}

Timeline Graph 1

Timeline Graph 2

[jenks22222 · Accepted solution]

Not sure if this is the best way to go about this ... but I got it to work by creating a second spunk.ui.timeline.js file and calling it in the second script which then generates the second timeline graph successfully.

Updated this line to point to the second version of spunk.ui.timeline:

var timelineToken = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline2.js", function() {