This samples shows how to asynchronously load the Splunk Timeline control, and perform operations on it. It will create a simple search, and as timeline data is available, will keep updating the timeline. Once the search is done, the job will be cancelled.
Note: Due to requiring <canvas>
, it only works in IE9+, 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) { var searcher = new splunkjs.JobManager(job.service, job); // Queue up timeline displays while we are querying the job searcher.on("progress", function(properties) { job.timeline({}, function(err, data) { if (!err) updateTimeline(data); }); }); // Move forward once the search is done searcher.on("done", callback); }, // Get the final timeline data function(searcher, callback) { searcher.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 sample shows how to asynchronously load the Splunk Charting control, and perform operations on it. It will create a simple search, and when the search is done, will fetch results and display 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) { var searcher = new splunkjs.JobManager(job.service, job); // Move forward once the search is done searcher.on("done", callback); }, // Get the final results data function(searcher, callback) { searcher.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(); } });