Description

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

Code Run

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

Description

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.

Code Run

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