jQuery Sparklines

About

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, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.

Each example displayed below takes just 1 line of HTML or javascript to generate.

The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.

News

15 June 2013 - Version 2.1.2 Relased
This release adds support for jQuery 1.10.0 and other bug fixes and minor improvements.

See the full changelog for details of all changes.

26 January 2013 - Version 2.1.1 Relased
This release adds support for jQuery 1.9.0 along with a couple of other bug fixes.

If you're using a version of jQuery later than 1.8, be extra sure you're not rendering your page in quirks mode to avoid breaking tooltips for IE users. See jQuery's notes on quirks compatiblity for more info.

See the full changelog for details of all changes.

15 October 2012 - Version 2.1 Released
This release is primarily a bug-fix release, but also adds support for Internet Explorer 10.

See the full changelog for details of all changes.

29 April 2012 - Version 2.0 Released
This release represents a significant code update. It features:

• Customizable mouseover tooltips and interaction including highlighting of moused-over values.
• Click interaction with moused-over values
• Support for stacked bar charts
• Line charts may not have spot-markers on any/all points
• Much more flexible colour maps for bar and tristate charts
• Numerous bug fixes and performance enhancements
• See the full changelog for more

It should be fully backwards compatible with the 1.x versions with the following exceptions:

• Now requires at least jQuery 1.4.3
• Default colours have been updated to work better with mouseover highlighting

There's a few non-code updates as well:

• Moved the source code to Github - Fork it for yourself - Pull requests welcome.
  Also see the issue tracker located on Github for filing bug and feature requests
• Created a Google Group for questions
• Refactored the "Try it now" tool on the front page to add more options and display a code tab reflecting the selected choices
• Added an FAQ section to this site

Also check out Splunk 4.3 - This project was originally written for that product and it finally shipped with it ;-) Now you can have sparklines in your Splunk dashboards.

30 November 2010 - Version 1.6 Released
This release primarily makes it easier to work with the sparklines if your environment requires you to pass options such as colours, etc. on the tags themselves, rather than feeding them to the sparkline function. It also allows for values to passed as an attribute on the tag, as well as a comment inside the tag. This avoids the values being displayed on screen briefly before the sparkline function has a chance to execute.

eg.

<span class="sparkline" sparkType="bar" sparkBarColor="green"><!-- 1,2,3,4 --></span>

$('.sparkline').sparkline('html', { enableTagOptions: true });
        

This release also:

• Adds the drawNormalOnTop option to display normal ranges over the top of the fill colour in line charts
• Fixes an issue with non-integer values in bullet charts
• Fixes an issue with elements that have not yet been inserted into the DOM
• Removes the indexOf Array prototype addition that caused some conflicts with IE and other libraries
• Allows you to override global default settings by updating $fn.sparkline.defaults

See the changelog for the complete list of changes.

1 March 2010 - Version 1.5.1 Released
I accidentally left a stray comma in the 1.5 release which breaks compatibility with Internet Explorer. This version contains only a fix for that bug.

26 February 2010 - Version 1.5 Released
This version contains a number of minor updates and fixes, including:

• Composite charts should work for all chart types now
• colorMap can now accept an array of colours to control the colour of each individual bar, rather than mapping colours by Y value
• Added a nullColor option to bar charts so that null values may optionally show up as a thin line rather than being omitted entirely
• Added chartRangeClip option to clip the Y values of charts

See the changelog for the complete list of changes.

14 September 2009 - Version 1.4.3 Released
This version adds support for null values for line and bar charts, updates the default pie chart colours, adds the colorMap option for bar charts and adds a lineWidth option for line charts. - See the changelog for full details.

Over 3,000 people have bookmarked this site on delicious now! Only 7 votes on the jQuery plugins site though; maybe you could help with that ;-)

25 April 2009 - Version 1.4.2 Released
This release just fixes the drawing of circular spots on line charts for Internet Explorer 8.

27 March 2009 - Version 1.4.1 Released
This is a bug fix release - It addresses an off-by-one-pixel error when rendering sparklines in Internet Explorer. It also addresses some issues with sparklines not being rendered in some situations with jQuery 1.3 and higher.

25 February 2009 - Version 1.4 Released
This version adds box plots 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100 suggested by Daniel Kadosh. What's a box plot?.

This release also includes a few bug fixes including one where lines would not always appear crisp in canvas based browsers such as Firefox.

Also at this time IE8 RC1 is out.. It looks like sparklines work fairly well in this release, although the small circles used in line charts, box plots, etc. don't show up.

25 January 2009 - Version 1.3 Released
This version fixes some positioning issues on all platforms and adds some support for Internet Explorer 8. IE 8 beta 2 (the latest beta release) seems to have some VML bugs though that I haven't been able to work around yet, so the results aren't perfect.

This version also adds a new function called $.sparkline_display_visible() - Call this anytime sparklines that were drawn into a non-displayed element may have just become visible so that they will be correctly rendered. For example, this site uses the function to make sure sparklines displayed in the various tabbed pages are drawn when the tab is selected.

Finally I updated the site and docs somewhat as the old layout was looking a little cramped.

21 November 2008 - Version 1.2.1 Released
Fixes a couple of pie chart bugs; no new features.

19 November 2008 - Version 1.2 Released
Some important bug fixes amongst some basic new features:

• Added zeroColor option to bar charts
• Line, bar and discrete charts can now be plotted within a fixed value range using chartRangeMin and chartRangeMax - Useful if you want several different charts to use the same scale (though not very sparkline-ish)
• Line charts can now explicitly set the width of each value with defaultPixelsPerValue while allowing the chart as a whole to remain dynamically sized
• The start angle for pie charts can now be modified with an offset option
• Line charts can specify both the x and y values now; previously the x values were assumed to be sequential from 0 (and still are by default)

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

• 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

Documentation

Quick Start

To add some sparklines to your web page you need four things:

1. The jQuery javascript library loaded into the page - At least version 1.4.3 or higher
2. A copy of jquery.sparkline.js loaded into the page which you can download from this site
3. An inline tag on the page within which to display the sparkline (eg. <span>)
4. A call to the sparkline() function to actually display the sparkline.

Additionally rendering the page in standards mode (see the DOCTYPE declaration in the example below) maximizes compatibilty with Internet Explorer.

Here's a simple web page that will display some sparklines:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<head>

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

    <script type="text/javascript">
    $(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline(); 

        /* Sparklines can also take their values from the first argument 
        passed to the sparkline() function */
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

        /* Use 'html' instead of an array of values to pass options 
        to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
    });
    </script>
</head>
<body>

<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>


</body>
</html>

Click here to open this example in a new window.

As the example shows, the values to be used in a sparkline can either be supplied inline, inside the tag to be used as the target or can be passed as the first parameter to the sparkline() function.

To draw different types of charts, or overlay one on top of another, or display charts into hidden layers, read on.

Syntax

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

<script type="text/javascript">
$('.sparklines').sparkline('html');
$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);
</script>

Values supplied in the tag can also appear inside a comment, or as an attribute of the tag itself:

<span class="sparklines"><!-- 1,2,3,4,5,4,3,2,1 --></span>
<span class="sparklines" values="1,2,3,4,5,4,3,2,1"></span>

By default the plugin will look for an attribute called "values" on the tag to find values to render, but you can change this by setting the tagValuesAttribute option. This can be useful if you want to create a composite graph as you can use different names for the values attribute for each graph.

Options is an object that specifies the type of sparkline to draw, colours to use, etc.

$('#barchart').sparkline(myvalues, { type:'bar', barColor:'green' });

If necessary, options can be passed as attributes on each tag. This requires setting the enableTagOptions option when calling the sparklines() function and reduces performance somewhat (more critical on IE6)

<span class="sparklines" sparkType="bar" sparkBarColor="green"><!-- 1,2,3,4,3,2,1 --></span>
<span class="sparklines" sparkType="bar" sparkBarColor="red"><!-- 1,2,3,4,3,2,1 --></span>

<script type="text/javascript">
$('.sparklines').sparkline('html', { enableTagOptions: true });
</script>

Each option must be prefixed with "spark", though this can be changed by passing a tagOptionPrefix option to the sparkline() function

You can also override the default options for all subsequent sparklines by assigning values to $.fn.sparkline.defaults

Eg. to change the default line color as listed in the common options below, you can do:

$.fn.sparkline.defaults.common.lineColor = 'red';

Replace 'common' with 'line', 'bar', 'tristate', 'discrete', 'bullet', 'pie' or 'box' to set options specific to those chart types.

Common Options

These options can be set for most of the supported chart types.

Range Maps

Several parameters, such as colorMap and tooltipLookupValues accept a range map as a paramter. As the name suggest, it maps ranges of numbers to values. For example:

    var range_map = $.range_map({
        1: 'red',
        '2:9': 'yellow',
        '10:': 'red'
    })

This would map 1 to red, values of 2 through 9 (inclusive) to yellow and values of 10 and higher to 'red'

Hidden Sparklines

If you try to display a sparkline in a tag that's currently not visible (ie. the tag or one of its parents are set to display:none) then you'll find that the sparkline hasn't been rendered when you finally do make the tag visible. This is because a tag with display:none has no size, and thus a canvas can't be created and sized for the sparkline to be rendered to.

The solution is to call the $.sparkline_display_visible() function anytime a sparkline may have become visible so that it can be correctly rendered. This is the technique this site uses to handle the sparklines that are hidden in the different tabbed sections; the site calls the routine in the tab-changed callback.

Note that as of version 2.0, support for hidden sparklines can be disabled by supplying the disabledHiddenCheck option. This can result in a performance increase in some cases.

Line Charts

Line charts are the default chart type, but to specify the type explicitly set an option called "type" to "line".

See also all of the common options above, that can also be used with line charts

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:

1. Inline: x and y values are separated by a colon: x:y,x:y,x:y - eg. <span class="linechart">1:3,2.7:4,4.8:3</span>
2. Array of arrays: An array of [x,y] arrays: $('#linechart').sparkline([ [1,3], [2.7,4], [4.8,3] ]);
3. Separate arrays: Pass x values separately: $('#linechart').sparkline([3,4,3], { xvalues: [1,2.7,4.8]});

You can also specify a value of "null" to omit values from the chart completely. eg:
<span class="linechart">1,2,3,null,3,4,2</span> becomes:
1,2,3,null,3,4,2

Bar Charts

Set the "type" option to "bar" to generate bar charts. Values can be omitted by using the "null" value instead of a number.

See also all of the common options above, that can also be used with bar charts

Version 2.0 adds support for stacked bar charts. Values for each data series in the chart can be separated by colons if passed by html, or as an array of arrays.

For example, to draw series one with values of 1,2,3,4 and series 2 with values of 4,3,2,1:

    <span class="bar">1:4,2:3,3:2,4:1</span>

    // same result as the html data above
    $('.bar').sparkline([ [1,4], [2, 3], [3, 2], [4, 1] ], { type: 'bar' });

Tristate Charts

Tri-state charts are useful to show win-lose-draw information, such as the SF Giants recent game results at the top of the page. You can also use the colorMap option to use different colours for different values, or for arbitrary positions in the chart.

Set the "type" option to "tristate" to generate tristate charts.

See also all of the common options above, that can also be used with tristate charts

Discrete Charts

Discrete charts provide a separated thin vertical line for each value.

Set the "type" option to "discrete" to generate discrete charts.

See also all of the common options above, that can also be used with discrete charts

Bullet Graphs

See the wikipedia page for more information on Bullet graphs.
Supplied values must be in this order: target, performance, range1, range2, range3, ...

Set the "type" option to "bullet" to generate bullet graphs.

See also all of the common options above, that can also be used with bullet charts

Pie Charts

Set the "type" option to "pie" to generate pie charts.

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

See also all of the common options above, that can also be used with pie charts

Box Plots

See the wikipedia page for more information on Box plots

Set the "type" option to "box" to generate box plots.

See also all of the common options above, that can also be used with box plot charts

As noted in the options above, by default "raw" is set to false. This means that you can just pass an arbitrarily long list of values to the sparkline function and the corresponding box plot will be calculated from those values. This is probably the behaviour you want most of the time.

If, on the other hand, you have thousands of values to deal with you may want to pre-compute the points needed for the box plot. In that case, set raw=true and pass in the computed values. If showing outliers, supplied values of:
low_outlier, low_whisker, q1, median, q3, high_whisker, high_outlier
Omit the outliers and set showOutliers to false to omit outlier display.

Interactive Sparklines

Version 2.0 of the plugin introduces support for interactive sparklines in the form of tooltips, mouseover highlighting and click interaction for all supported types of sparkline.

If you're happy with the default look and feel of the tooltips, you can skip this entire section.

Options to control sparkline interactions:

Formatting Tooltips

There are a couple of approaches you can take to format tooltips. Either you can manually generate tooltips by using the tooltipFormatter callback function (perhaps to hook in an external tooltip library), or you can use the other tooltip options above to fine-tune the default formatter.

The tooltipFormat and toolipValueLookups options provide the main methods of formatting the text displayed for each value in a toolip.

The tooltipFormat is applied whenever the mouse is moved over a value. Various fields enclosed between double curly braces in the format string are substituted depending on the type of sparkline in use. For example, the default format string for line charts is:

  <span style="color: {{color}}">&#9679;</span> {{prefix}}{{y}}{{suffix}}</span>

"color" is derived from the colour of the line being drawn.
"prefix" and "suffix" and set by setting the tooltipPrefix and tooltipSuffix items.
"y" represents the y value of the point under the mouse. "x" can also be used to if useful.

The supported fields for the different types of sparklines include:

• All types: "prefix", "suffix" as set by tooltipPrefix and tooltipSuffix options
• Line: "color", "fillColor", "x", "y", "isNull" (true if a null value)
• Bar: "value" (the value under the pointer), "color", "isNull"
• Tristate: "value" (the value under the pointer), "color", "isNull"
• Discrete: "value", "isNull"
• Pie: "value", "percent" (number between 0 and 100), "color" (of the moused-over slice)"
• Bullet: "value", "fieldkey", "isNull"
• Box: "field" and "value". Field may be one of "lq" (lower quartile), "med" (median), "uq" (upper quartile), "lo" (left outlier), "ro" (right outlier), "lw" (left whisker) "rw" (right whisker)

Box plot field order

For box plots, you can control which fields are displayed and in what order using the tooltipFormatFieldlist and tooltipFormatFieldlistKey options. For example, to display only the median, lower quartile and upper quartile values, in that order: 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100

$('.boxplot').sparkline(values, {
    type: 'box', 
    tooltipFormatFieldlist: ['med', 'lq', 'uq'], 
    tooltipFormatFieldlistKey: 'field'
});

Formatting field names and values

You can translate field names and values to other arbitrary strings using the tooltipValueLookups option. Box plots do this, for example, to remap "lq" to the string "Lower Quartile", etc but you can also use it to map values (numbers) or ranges of values to strings too using a range map

For example, we can create a bar chart with tooltips that say "low", "medium" or "high" along with the value:  

var values = [1, 3, 5, 3, 8];
$('.bar').sparkline(values, {
    type: 'bar',
    tooltipFormat: '{{value:levels}} - {{value}}',
    tooltipValueLookups: {
        levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
    }
});

You can also specify a CSS class name to associate with a format by passing the format string and class to $.spformat:

$('.bar').sparkline(values, {
    type: 'bar',
    tooltipFormat: $.spformat('{{value}}', 'tooltip-class')
});

Click Events

When a user clicks on a sparkline, a sparklineClick event is generated. The event object contains a property called "sparklines" that holds an array of the sparkline objects under the mouse at the time of the click. For non-composite sparklines, this array will have just one entry.

This example will display an alert with the moused-over value whenever a value is clicked: 1,3,4,7,1,3,2,4,5,6,6,5

$('.clickdemo').sparkline();
$('.clickdemo').bind('sparklineClick', function(ev) {
    var sparkline = ev.sparklines[0],
        region = sparkline.getCurrentRegionFields();
    alert("Clicked on x="+region.x+" y="+region.y);
});

The fields available from getCurrentRegionFields() match those listed in the formatting tooltips section, above.

Mouse-over Events

When the mouse moves over a different value in a sparkline a sparklineRegionChange event is generated. This can be useful to hook in an alternate tooltip library.

As with the sparklineClick event, the generated event has a property called sparklines that holds an array of the sparklines under the pointer.

Example that updates a span with the current region details: 1,3,4,7,1,3,2,4,5,6,6,5 Last region:

$('.mouseoverdemo').sparkline();
$('.mouseoverdemo').bind('sparklineRegionChange', function(ev) {
    var sparkline = ev.sparklines[0],
        region = sparkline.getCurrentRegionFields(),
        value = region.y;
    $('.mouseoverregion').text("x="+region.x+" y="+region.y);
}).bind('mouseleave', function() {
    $('.mouseoverregion').text('');
});

License

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

Download

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

NOTE: Be sure to copy the files linked below to your own server - If you embed the plugin as a link from my server, your site will be broken when this site is down (as it occasionally is).

If you use the plugin on a production site I'd love to see it in action, so please send me an email! (be sure to include "jQuery Sparkline" in the subject).

You can download released versions below, or checkout the source directly from the jQuery Sparkline github repo.

Version 2.1.2:

• jquery.sparkline.js (Uncompressed - 120KB)
• jquery.sparkline.min.js (Minified - 43kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 14KB)

Version 2.1.1:

• jquery.sparkline.js (Uncompressed - 120KB)
• jquery.sparkline.min.js (Minified - 44kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 14KB)

Version 2.1:

• jquery.sparkline.js (Uncompressed - 120KB)
• jquery.sparkline.min.js (Minified - 43kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 14KB)

Version 2.0:

• jquery.sparkline.js (Uncompressed - 119KB)
• jquery.sparkline.min.js (Minified - 43kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 13KB)

Version 1.6:

• jquery.sparkline.js (Uncompressed - 54KB)
• jquery.sparkline.min.js (Minified - 27kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 6.0KB)

Version 1.5.1:

• jquery.sparkline.js (Uncompressed - 47KB)
• jquery.sparkline.min.js (Minified - 25kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 5.1KB)

Version 1.4.3:

• jquery.sparkline.js (Uncompressed - 41KB)
• jquery.sparkline.min.js (Minified - 22kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 4.7KB)

Version 1.3:

• jquery.sparkline.js (Uncompressed - 34kB)
• jquery.sparkline.min.js (Minified - 18kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 4.0KB)

Version 1.2.1:

• jquery.sparkline.js (Uncompressed - 33kB)
• jquery.sparkline.min.js (Minified - 18kB)
• jquery.sparkline.min.js.gz (Minified & gzipped - 3.9Kb)

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! (try to send a link to an example of the plugin in action for bonus points ;-) )

Current users include:

• Splunk - The whole reason this plugin was writen in the first place!
  Take a look at Adding some sparkline love to your Splunk dashboards ;-)
• GPU Garden - Tracks Aamzon prices for graphics cards
• Alharaca.org - Realtime Arab news
• Macaronics - Crowd-sourced language learning and translation service
• frePPLe - Open source production planning tool using sparklines - See screenshots here, here, and here.
• Sparklines of polling data
• Game On! - Mobile web app (see also about the code)
• Sharkscope
• Trendsmap - Display realtime Twitter trends
• The New Fuelist
• Tumblr Updtime - Uses sparklines to display Tumblr's api uptime and performance
• LogMyTime - Uses pie charts for their SaaS time tracking application (German only) - See also their blog post
• Gridspy web power monitoring system
• Meteor Asset Management - Uses YQL to collect the graphed data directly in the browser
• SparkPlug: WordPress Sparkline Plugin
• Path to SharePoint
• Letham Shank Weather Station
• FancyGrid - Javascript chart library

Frequently Asked Questions

Why are there no axis labels/markers?

Sparklines are intended to be small enough to fit alongside a line of text, to give a quick impression of a trend or pattern and thus don't have the paraphernalia of full sized charts. As of version 2.0 you can mouse over the sparklines to see the underlying data.

How do I annotate a sparkline?

The plugin has no support for adding text to a sparkline, beyond that provided by tooltips. You can, of course, use HTML and CSS to add appropriate text next to the sparkline.

How can I change the way the tooltips look?

See Formatting Tooltips.

Can I use the plugin to create full-sized charts?

You can use the width and height properties to generate whatever sized charts you need, but really you'd be better served using a more full-featured charting library that will draw axis labels, etc. Some examples include:

• Flot
• jqPlot
• Protovis
• Highcharts (not open source)

How do I draw a sparkline on an element that is not yet in the DOM?

You need to know two things:

1. The element you create must have some initial content, even if it's just &nbsp;
2. After the element is inserted into the DOM (and visible), you must call $.sparkline_display_visible() to actually display it

Eg.

// create an element and draw a sparkline
var barchart = $('<span>&nbsp;</span>');
barchart.sparkline([1,2,3,2], {type: 'bar'});
// insert the element somewhere into the DOM
$('#mycharts').append(barchart);
// actually render any undrawn sparklines that are now visible in the DOM
$.sparkline_display_visible();

Sparklines don't work correctly in IE

The plugin has been tested with IE 6-10. It is often important that the page they are used on is rendered in standards mode, however. This is done by providing the correct doctype at the start of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

My sparklines aren't appearing when its parent element appears

Sparklines that are rendered into a hidden element (ie. one of its parent elemnts has display:none) will not be automatically rendered when the parent becomes visible: You have to expicitly tell the plugin to check to see which sparklines have become visible and render those now.

See the section on hidden sparklines for more details.

How do I ask a question that's not answered here?

Try posting a question to the jQuery Sparkline Google Group. A small, working example is very useful in debugging any issues you might be having.

How do I report a bug or feature request?

Please use the issue tracker on github.

Are patches accepted?

Patches are a good way to get a fix/feature into the plugin sooner rather than later. Ideally send a pull request via github.

Feedback

Questions and feedback about the plugin are welcome on the jQuery Sparkline Google Group.

Bugs and feature requests should be filed in the Github tracker.

If submitting a bug report, or asking a question it's very useful to have a simple working example that demonstrates your issue. As easy way to do that is to change this jsfiddle example and use the "fork" feature to create a shareable example of your own.

I (Gareth Watts) can be reached by email at - [email protected] (be sure to include "jQuery Sparkline" in the subject) or find me on Twitter