From Splunk Wiki

(Redirected from Dev:SparklinesExample)
Jump to: navigation, search

Splunk Sparklines

A sparkline is a small "word sized" graph, displayed inline with text (see the Wikipedia description) useful for quickly displaying trends in a format more accessible than lists of numbers.

In July 2008, Splunk released an open source plugin for the jQuery javascript framework to easily generate sparklines directly in the browser, without requiring any server-side graphing support. The plugin works with all modern browsers, including Firefox, Safari and Internet Explorer. You can visit the sparkline project page for examples and downloads.

The release of the plugin generated a good deal of interest and lots of hits to the above site, so I thought it'd be interesting to use Splunk to chart the rise and fall of referrers to the site after the initial launch:

The resulting web page

How it works

Producing the page to the right is very easy; I used:

The idea is to load the web server logs into Splunk and wirte a simple PHP page to connect to Splunk, run a search and chart the results in HTML using the sparkline plugin.

A snipet from the web server log looks like this: - - [16/Jul/2008:23:01:32 +0000] "GET /jquery.sparkline/ HTTP/1.1" 200 7265 "-" "Mozilla/5.0 (compatible;" - - [16/Jul/2008:23:01:36 +0000] "GET /jquery.sparkline/ HTTP/1.1" 200 7265 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506)" - - [16/Jul/2008:23:01:37 +0000] "GET /jquery.sparkline/jquery-1.2.6.min.js HTTP/1.1" 200 55774 "" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .N
ET CLR 2.0.50727; .NET CLR 3.0.04506)" - - [16/Jul/2008:23:01:38 +0000] "GET /jquery.sparkline/jquery.sparkline.js HTTP/1.1" 200 17515 "" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .N
ET CLR 2.0.50727; .NET CLR 3.0.04506)"

The first step is to startup an instance of Splunk and load the log data into it. We'll then have the PHP page connect to Splunk and run a search against it to build the sparklines.

PHP Code

If you want to try this yourself, you can download the logs and code used for this example here: and load the log data into your own copy of Splunk (which of course you can download for free)

First we load up the PHP SDK and set some variables to limit the start and end time we're interested in, along with the "bucket size" we want to use - As we want reasonably small sparklines, we want a small number of values - Limiting the report to a 5 day window with 2 hour buckets gives us 5*24/2 = 60 values per referrer.

// Pull in the Splunk PHP SDK
require 'splunk_con.php';

// We'll just look at a 5 day window when the site was launched
$starttime = mktime(0,0,0,7,17,2008);
$endtime = $starttime + (86400*5); 

// Use 2 hour buckets for reasonable sized sparklines
$bucket = 7200;

We then open up a new connection to the Splunk server (the default is to connect to the one on localhost, used here) and run a search.

$splunk = new SplunkConnection();
$splunkSession = $splunk->Authenticate();

$search = new SearchManager($splunk);
$results = null;

// Run a search against the Splunk server
$job_id = $search->syncSearch(
    'search "GET /jquery.sparkline/ " | timechart span=2h count(_raw) by referer_domain useother=f where count in top20', 
    array('start_time'=>$starttime, 'end_time'=>$endtime)

$results = $search->getJobEvents($job_id, true, null);

Limiting the search to just "GET /jquery.sparkline/ " (note there's a space after that last forward slash) restricts the results to just hits to the main HTML page, excluding the javascript components that the browser loads subsequently. Take a look at the timechart documentation to get a breakdown of how that works.

The remainder of the PHP then loops over the results Splunk gives us and builds an array for each of the top 20 referrers.

// Loop over the results and build a couple of arrays to hold the totals for each referrer
foreach($results as $result) {
    $hour = (strtotime($result['_time'])-$starttime)/$bucket;
    foreach($result as $referrer => $value) {
        if ($referrer[0]=='_') continue;
        if (!isset($sparkdata[$referrer])) {
            $sparkdata[$referrer] = array_fill(0, ($endtime-$starttime)/$bucket, 0);
            $sparktotals[$referrer] = 0;
        $sparkdata[$referrer][$hour] = $value;
        $sparktotals[$referrer] += $value;

// Sort the totals so we can display the most popular referrer first

Once we have those arrays, plotting them in the HTML is simple.

First we load in the jquery and jquery.sparkline javascript libraries:

 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="jquery.sparkline.js"></script>

Further down in the HTML we loop over the arrays built by PHP and print out the referrer site name and the list of values in a span element:

        foreach($sparktotals as $referrer=>$total) {
            printf("<li><a href=\"%s\">%s</a>: "
                ."<span class=\"sparkline\">%s</span> - %s hits</li>\n", 
                $referrer, $referrer, implode(',', $sparkdata[$referrer]), $total

This gives us rows like:

<li><a href=""></a>: <span class="sparkline">18,93,71,238,...,255,170</span> - 1910 hits</li>

To finally turns all those numbers into pretty sparklines takes just one more line of javascript:


This applies the sparkline method to every element in the page with the sparkline class. You can pass options to this method to change colours or chart types.

That's it!

Hopefully you can use a similar technique with your favourite SDK to introduce a bit of spark to your own Splunk-powered reports.

Personal tools
Hot Wiki Topics

About Splunk >
  • Search and navigate IT data from applications, servers and network devices in real-time.
  • Download Splunk