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:
How to start a Splunk session
<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;
}
</p>
<p>var http = new splunkjs.ProxyHttp("/proxy");<br>
svc = new splunkjs.Service(http, {<br>
scheme: "https",<br>
host: "xxx",<br>
port: "8089",<br>
username: "xxx",<br>
password: "xxx",<br>
});</p>
<p>Async = splunkjs.Async;<br>
utils = splunkjs.Utils; <br>
var timeline = null;<br>
var timelineToken = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline.js", function() {<br>
// Once we have the charting code, create a chart.<br>
timeline = new splunkjs.UI.Timeline.Timeline($("#timeline-container0"));<br>
});</p>
<p>var searchTerm = 'search index=_internal | head 10000 | stats count(host), count(source) by sourcetype';</p>
<p>// A small utility function to queue up operations on the chart<br>
// until it is ready.<br>
var updateTimeline = function(data) {<br>
var setData = function() {<br>
timeline.updateWithJSON(data);<br>
}<br>
if (timeline === null) {<br>
splunkjs.UI.ready(timelineToken, function() { setData(); });<br>
}<br>
else {<br>
setData();<br>
}<br>
};</p>
<p>Async.chain([<br>
// Login<br>
function(callback) { svc.login(callback); },<br>
// Create the job<br>
function(success, callback) {<br>
svc.jobs().create(searchTerm, {status_buckets: 300}, callback);<br>
},<br>
// Loop until the job is "done"<br>
function(job, callback) {<br>
job.track({}, {<br>
// Queue up timeline displays while we are querying the job<br>
progress: function(job) {<br>
job.timeline({}, function(err, data) {<br>
if (!err) updateTimeline(data);<br>
});<br>
},<br>
// Move forward once the search is done<br>
done: function(job) {<br>
callback(null, job);<br>
},<br>
error: function(err) {<br>
callback(err);<br>
}<br>
});<br>
},<br>
// Get the final timeline data<br>
function(job, callback) {<br>
job.timeline({}, callback);<br>
},<br>
// Update the timeline control<br>
function(timelineData, job, callback) {<br>
updateTimeline(timelineData);<br>
callback(null, job);<br>
}<br>
],<br>
// And we're done, so make sure we had no error, and<br>
// cancel the job<br>
function(err, job) {<br>
if (err) {<br>
console.log(err);<br>
alert("An error occurred");<br>
}<br>
if (job) {<br>
job.cancel();<br>
}<br>
});<br>
var http1 = new splunkjs.ProxyHttp("/proxy");
svc1 = new splunkjs.Service(http1, {
scheme: "https",
host: "xxx",
port: "8089",
username: "xxx",
password: "xxx",
});
Async1 = splunkjs.Async;
utils1 = splunkjs.Utils;
var timeline1 = null;
var timelineToken1 = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline.js", function() {
// Once we have the charting code, create a chart.
timeline1 = new splunkjs.UI.Timeline.Timeline($("#timeline-container1"));
});
var searchTerm1 = 'search index=_internal | head 10000 | stats count(host), count(source) by sourcetype';
// A small utility function to queue up operations on the chart
// until it is ready.
var updateTimeline1 = function(data1) {
var setData1 = function() {
timeline1.updateWithJSON(data1);
}
if (timeline1 === null) {
splunkjs.UI.ready(timelineToken1, function() { setData1(); });
}
else {
setData1();
}
};
Async1.chain([
// Login
function(callback) { svc1.login(callback); },
// Create the job
function(success, callback) {
svc1.jobs().create(searchTerm1, {status_buckets: 300}, callback);
},
// Loop until the job is "done"
function(job1, callback) {
job1.track({}, {
// Queue up timeline displays while we are querying the job
progress: function(job1) {
job1.timeline({}, function(err, data1) {
if (!err) updateTimeline1(data1);
});
},
// Move forward once the search is done
done: function(job1) {
callback(null, job1);
},
error: function(err) {
callback(err);
}
});
},
// Get the final timeline data
function(job1, callback) {
job1.timeline({}, callback);
},
// Update the timeline control
function(timelineData1, job1, callback) {
updateTimeline1(timelineData1);
callback(null, job1);
}
],
// And we're done, so make sure we had no error, and
// cancel the job
function(err, job1) {
if (err) {
console.log(err);
alert("An error occurred");
}
if (job1) {
job1.cancel();
}
});
Timeline Graph 1
Timeline Graph 2
... View more