This example shows how to asynchronously load the Splunk Timeline control and perform different operations. This example creates a simple search, and updates the timeline as data becomes available. Once the search is done, the job is cancelled.
Note: Due to requiring <canvas>
, this example only works in Internet Explorer 9+, Firefox 2+, Chrome 4+, and Safari 3.1+.
var http = new splunkjs.ProxyHttp("/proxy"); svc = new splunkjs.Service(http, { scheme: scheme, host: host, port: port, username: username, password: password, version: version }); 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-container")); }); 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(); } });
This example shows how to asynchronously load the Splunk Charting control and perform different operations. This example creates a simple search, fetches the results when the search is done, and displays them in the chart.
var http = new splunkjs.ProxyHttp("/proxy"); svc = new splunkjs.Service(http, { scheme: scheme, host: host, port: port, username: username, password: password, version: version }); var chart = null; var chartToken = splunkjs.UI.loadCharting("../../../client/splunk.ui.charting.js", function() { // Once we have the charting code, create a chart and update it. chart = new splunkjs.UI.Charting.Chart($("#chart-container"), splunkjs.UI.Charting.ChartType.COLUMN, false); }); var searchTerm = 'search index=_internal | head 1000 | stats count(host), count(source) by sourcetype'; 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) { // Move forward once the search is done job.track({}, { done: function(job) { callback(null, job); }, error: function(err) { callback(err); } }); }, // Get the final results data function(job, callback) { job.results({output_mode: "json_cols"}, callback); }, // Update the chart function(results, job, callback) { splunkjs.UI.ready(chartToken, function() { chart.setData(results, { "chart.stackMode": "stacked" }); chart.draw(); 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(); } });