https://community.splunk.com/t5/Splunk-Dev/Multiple-Timeline-graphs-on-a-single-webpage-Javascript-SDK/m-p/79650#M1141 <P>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.</P> <P>Updated this line to point to the second version of spunk.ui.timeline:</P> <P>var timelineToken = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline2.js", function() {</P> Sat, 29 Jun 2013 02:52:31 GMT jenks22222 2013-06-29T02:52:31Z https://community.splunk.com/t5/Splunk-Dev/Multiple-Timeline-graphs-on-a-single-webpage-Javascript-SDK/m-p/79649#M1140 <P>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.</P> <P>Code:</P> <P><BR /> <BR /> <META charset="utf-8" /><BR /> <TITLE>How to start a Splunk session</TITLE></P> <PRE><CODE>&lt;link href="/examples/browser/resources/bootstrap.css" rel="stylesheet"&gt; &lt;link href="/examples/browser/resources/prettify.css" type="text/css" rel="stylesheet" /&gt; &lt;link href="/examples/browser/resources/timeline.css" type="text/css" rel="stylesheet" /&gt; &lt;style type="text/css"&gt; </CODE></PRE> <H1>timeline-container0 {</H1> <P>height: 250px;<BR /> width: 500px;<BR /> }</P> <H1>timeline-container1 {</H1> <P>height: 250px;<BR /> width: 500px;<BR /> }<BR /> <BR /> <SCRIPT type="text/javascript" src="https://community.splunk.com/client/splunk.js"></SCRIPT><BR /> <SCRIPT type="text/javascript" src="https://community.splunk.com/examples/browser/resources/jquery.min.js"></SCRIPT><BR /> <SCRIPT type="text/javascript" charset="utf-8">&lt;/p&gt; &lt;p&gt;var http = new splunkjs.ProxyHttp(&amp;quot;/proxy&amp;quot;);&lt;br&gt; svc = new splunkjs.Service(http, {&lt;br&gt; scheme: &amp;quot;https&amp;quot;,&lt;br&gt; host: &amp;quot;xxx&amp;quot;,&lt;br&gt; port: &amp;quot;8089&amp;quot;,&lt;br&gt; username: &amp;quot;xxx&amp;quot;,&lt;br&gt; password: &amp;quot;xxx&amp;quot;,&lt;br&gt; });&lt;/p&gt; &lt;p&gt;Async = splunkjs.Async;&lt;br&gt; utils = splunkjs.Utils; &lt;br&gt; var timeline = null;&lt;br&gt; var timelineToken = splunkjs.UI.loadTimeline(&amp;quot;/client/splunk.ui.timeline.js&amp;quot;, function() {&lt;br&gt; // Once we have the charting code, create a chart.&lt;br&gt; timeline = new splunkjs.UI.Timeline.Timeline($(&amp;quot;#timeline-container0&amp;quot;));&lt;br&gt; });&lt;/p&gt; &lt;p&gt;var searchTerm = &amp;#39;search index=_internal | head 10000 | stats count(host), count(source) by sourcetype&amp;#39;;&lt;/p&gt; &lt;p&gt;// A small utility function to queue up operations on the chart&lt;br&gt; // until it is ready.&lt;br&gt; var updateTimeline = function(data) {&lt;br&gt; var setData = function() {&lt;br&gt; timeline.updateWithJSON(data);&lt;br&gt; }&lt;br&gt; if (timeline === null) {&lt;br&gt; splunkjs.UI.ready(timelineToken, function() { setData(); });&lt;br&gt; }&lt;br&gt; else {&lt;br&gt; setData();&lt;br&gt; }&lt;br&gt; };&lt;/p&gt; &lt;p&gt;Async.chain([&lt;br&gt; // Login&lt;br&gt; function(callback) { svc.login(callback); },&lt;br&gt; // Create the job&lt;br&gt; function(success, callback) {&lt;br&gt; svc.jobs().create(searchTerm, {status_buckets: 300}, callback);&lt;br&gt; },&lt;br&gt; // Loop until the job is &amp;quot;done&amp;quot;&lt;br&gt; function(job, callback) {&lt;br&gt; job.track({}, {&lt;br&gt; // Queue up timeline displays while we are querying the job&lt;br&gt; progress: function(job) {&lt;br&gt; job.timeline({}, function(err, data) {&lt;br&gt; if (!err) updateTimeline(data);&lt;br&gt; });&lt;br&gt; },&lt;br&gt; // Move forward once the search is done&lt;br&gt; done: function(job) {&lt;br&gt; callback(null, job);&lt;br&gt; },&lt;br&gt; error: function(err) {&lt;br&gt; callback(err);&lt;br&gt; }&lt;br&gt; });&lt;br&gt; },&lt;br&gt; // Get the final timeline data&lt;br&gt; function(job, callback) {&lt;br&gt; job.timeline({}, callback);&lt;br&gt; },&lt;br&gt; // Update the timeline control&lt;br&gt; function(timelineData, job, callback) {&lt;br&gt; updateTimeline(timelineData);&lt;br&gt; callback(null, job);&lt;br&gt; }&lt;br&gt; ],&lt;br&gt; // And we&amp;#39;re done, so make sure we had no error, and&lt;br&gt; // cancel the job&lt;br&gt; function(err, job) {&lt;br&gt; if (err) {&lt;br&gt; console.log(err);&lt;br&gt; alert(&amp;quot;An error occurred&amp;quot;);&lt;br&gt; }&lt;br&gt; if (job) {&lt;br&gt; job.cancel();&lt;br&gt; }&lt;br&gt; });&lt;br&gt; </SCRIPT></P> <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> <P><BR /> <BR /> </P><H2>Timeline Graph 1</H2><BR /> <DIV id="timeline-container0"><BR /> </DIV><BR /> <H2>Timeline Graph 2</H2><BR /> <DIV id="timeline-container1"><BR /> </DIV><BR /> <BR /> <P></P> Fri, 28 Jun 2013 18:14:42 GMT https://community.splunk.com/t5/Splunk-Dev/Multiple-Timeline-graphs-on-a-single-webpage-Javascript-SDK/m-p/79649#M1140 jenks22222 2013-06-28T18:14:42Z https://community.splunk.com/t5/Splunk-Dev/Multiple-Timeline-graphs-on-a-single-webpage-Javascript-SDK/m-p/79650#M1141 <P>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.</P> <P>Updated this line to point to the second version of spunk.ui.timeline:</P> <P>var timelineToken = splunkjs.UI.loadTimeline("/client/splunk.ui.timeline2.js", function() {</P> Sat, 29 Jun 2013 02:52:31 GMT https://community.splunk.com/t5/Splunk-Dev/Multiple-Timeline-graphs-on-a-single-webpage-Javascript-SDK/m-p/79650#M1141 jenks22222 2013-06-29T02:52:31Z