NASDAQ: Loading.. 1316.12 (close 10/17-11/20)
DOW: Loading.. 7552.29 (close 10/17-11/20)
SF Giants: Loading.. Last game 9/28
Mouse speed Loading..
Inline 10,8,9,3,5,8,5 line graphs 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Bar charts negative values:
Composite inline 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Inline with normal range 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Composite bar 4,6,7,7,4,3,2,1,4
Discrete 4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5
Discrete with threshold 4,6,7,7,4,3,2,1,4
Customize size and colours 10,8,9,3,5,8,5
Tristate charts
1,1,0,1,-1,-1,1,-1,0,0,1,1
(think games won, lost or drawn)
Tristate chart using a colour map: 1,2,0,2,-1,-2,1,-2,0,0,1,1
Pie charts 1,1,2 1,5 20,50,80
Bullet charts
10,12,12,9,7
14,12,12,9,7
10,12,14,9,7
Customize dynamically
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6 & 7.
The plugin was written by Splunk Inc and released under the New BSD License.
19 November 2008 - Version 1.2 Released
Some important bug fixes amongst some basic new features:
See the changelog for the complete list of changes.
14 August 2008 - Using Sparklines with Splunk
I gave a quick 5 minute demo at the Splunk Developers Boot Camp
on using the Splunk PHP SDK with jquery.sparkline.js to chart the traffic
this page received within the first few days of its launch.
Check out the short write up i posted to the new Splunk Wiki for the code and data I used to make it work (it was really easy) and if you download your own free copy of Splunk you can try it yourself ;-)
29 July 2008 - Version 1.1 Released
Thanks for the suggestions for improvements - This version fixes several bugs and adds some more features and chart types including
See the changelog for the complete list of changes.
17 July 2008 - Version 1.0 Released
Initial version released
$(selector).sparkline(values, options);
Values can either be an array of numbers or "html" which causes the values to be read from from the selected tag:
<span class="sparklines">1,2,3,4,5,4,3,2,1</span>
<span id="ticker"">Loading..</span>
$('.sparklines').sparkline('html');
$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);
Options specify the type of sparkline to draw, colours to use, etc
$('#barchart').sparkline(myvalues, { type:'bar', barColor:'green' });
Common options:
Line options:
By default the values supplied to line charts are presumed to be y values mapping on to sequential (integer) x values. If you need to specify both the x and y values for your chart, you have a few options:
Bar options:
Tristate options:
Discrete options:
Bullet graph options:
See the wikipedia page for more information on Bullet graphs.
Supplied values must be in this order: target, performance, range1, range2, range3, ...
Pie chart options:
These little pie charts tend only to be useful with 2 or 3 values at most
Note: jquery.sparkline.js is a plugin for jQuery - You need to include both on your page to generate sparklines.
Version 1.2:
Version 1.1:
Version 1.0:
This plugin is copyright Splunk Inc and licensed using the New BSD License
Are you using jquery.sparkline on your project or site? Send me a quick email and I'll add a link here!
Current users include:
Feedback and patches are welcome - Please direct email to Gareth Watts - gareth@splunk.com