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:
<html> <head> <meta charset="utf-8"> <title>How to start a Splunk session</title>
<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; } </style> <script type="text/javascript" src="/client/splunk.js"></script> <script type="text/javascript" src="/examples/browser/resources/jquery.min.js"></script> <script type="text/javascript" charset="utf-8">
var http = new splunkjs.ProxyHttp("/proxy"); svc = new splunkjs.Service(http, { scheme: "https", host: "xxx", port: "8089", username: "xxx", password: "xxx", });
Async = splunkjs.Async; utils = splunkjs.Utils; var timeline = null; var timelineToken = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline.js", function() { // Once we have the charting code, create a chart. timeline = new splunkjs.UI.Timeline.Timeline($("#timeline-container0")); });
var searchTerm = '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 updateTimeline = function(data) { var setData = function() { timeline.updateWithJSON(data); } if (timeline === null) { splunkjs.UI.ready(timelineToken, function() { setData(); }); } else { setData(); } };
Async.chain([ // Login function(callback) { svc.login(callback); }, // Create the job function(success, callback) { svc.jobs().create(searchTerm, {status_buckets: 300}, callback); }, // Loop until the job is "done" function(job, callback) { job.track({}, { // Queue up timeline displays while we are querying the job progress: function(job) { job.timeline({}, function(err, data) { if (!err) updateTimeline(data); }); }, // Move forward once the search is done done: function(job) { callback(null, job); }, error: function(err) { callback(err); } }); }, // Get the final timeline data function(job, callback) { job.timeline({}, callback); }, // Update the timeline control function(timelineData, job, callback) { updateTimeline(timelineData); callback(null, job); } ], // And we're done, so make sure we had no error, and // cancel the job function(err, job) { if (err) { console.log(err); alert("An error occurred"); } if (job) { job.cancel(); } }); </script>
<script type="text/javascript" charset="utf-8"> 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(); } }); </script></head> <body>