NASDAQ: Loading.. 2365.59 (close 7/22-8/25)

DOW: Loading.. 11628.06 (close 7/21-8/22)

SF Giants: Loading.. Last game 8/25

jQuery Sparklines

Examples

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 10,8,9,3,5,8,5 negative values: -3,1,2,0,3,-1

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.

News
Usage
Download
License
Who's Using It
Contact

News

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

Composite graphs (overlay one graph on top of another)
Pie charts
Bullet graphs
Discrete charts
Min/max spots for line charts
Normal range marking for line charts

See the changelog for the complete list of changes.

17 July 2008 - Version 1.0 Released
Initial version released

Usage

$(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:

type - line (default), bar, tristate, discrete, bullet or pie
width - Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc - This option does nothing for bar and tristate chars (see barWidth)
height - Height of the chart - Defaults to 'auto' (line height of the containing tag)
lineColor - Used by line and discrete charts
fillColor

Line options:

spotColor - Set to false or an empty string to hide the final value marker
minSpotColor - Set to false or an empty string to hide the minimum value marker
maxSpotColor - Set to false or an empty string to hide the maximum value marker
spotRadius - In pixels (default: 1.5)
normalRangeMin, normalRangeMax Specify threshold values between which to draw a bar to denote the "normal" or expected rnage of values. For example the green bar here 80,85,84,88,98,114,116,104,95,85,84 might denote a normal operating temperature range.

Bar options:

barColor - Colour used for postive values
negBarColor - Colour used for negative values
barWidth - Width of each bar, in pixels
barSpacing - Space between each bar, in pixels
zeroAxis - Centers the y-axis at zero if true (default is to automatically do the right thing)

Tristate options:

posBarColor - Colour for positive (win) values
negBarColor - Colour for negative (lose) values
zeroBarColor - Colour for zero (draw) values
barSpacing - Space between each bar, in pixels
zeroAxis - Centers the y-axis at zero if true (default is to automatically do the right thing)
colorMap - Map override colors to certain values - For example if you want all values of -2 to appear yellow, use colorMap: { '-2': '#ff0' }

Discrete options:

lineHeight - Height of each line in pixels - Defaults to 30% of the graph height
thesholdValue - Values less than this value will be drawn using thresholdColor instead of lineColor
thresholdColor

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

targetColor - The colour of the vertical target marker
targetWidth - The width of the target marker in pixels
performanceColor - The color of the performance measure horizontal bar
rangeColors - Colors to use for each qualitative range background color

Pie chart options:
These little pie charts tend only to be useful with 2 or 3 values at most

sliceColors - An array of colors to use for pie slices

Download

Note: jquery.sparkline.js is a plugin for jQuery - You need to include both on your page to generate sparklines.

Version 1.1:

jquery.sparkline.js (Uncompressed - 30kB)
jquery.sparkline.min.js (Minified - 16kB)
jquery.sparkline.min.js.gz (Minified & gzipped- 3.5Kb)

Version 1.0:

jquery.sparkline.js (Uncompressed - 17.5kB)

License

This plugin is copyright Splunk Inc and licensed using the New BSD License

Who's Using It

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:

EpiSPIDER news page

Contact

Feedback and patches are welcome - Please direct email to Gareth Watts - gareth@splunk.com