Description

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+.

Code

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();
  }
});
            

Description

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.

Code

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();
  }
});