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">
height: 250px;
width: 500px;
}
height: 250px;
width: 500px;
}
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() {
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() {