Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Create a sparkline in a canvas element.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo.html
readme.mdown
sparkline.js

readme.mdown

Canvas Sparklines

This is a little snippet of JavaScript that will take an array of numeric values (in any range) and plot those values as a sparkline.

The sparkline function takes five parameters:

  1. canvas_id: The ID of a canvas element.
  2. data: An array of numeric values.
  3. endpoint: A Boolean value.
  4. color: A string value.
  5. style: A string value, either 'line' or 'bar'.

If endpoint is set to true then the sparkline will mark the final value with a red dot.

If color is not set, the sparkline will default to 50% transparent black.

If style is not set, the sparkline will default to 'line'.

The demo.html shows a few examples. The distribution of the values is determined by the dimensions of the canvas element. So it doesn't matter if the data array contains values that are larger than the pixel dimensions of the canvas element: the script will normalise the values to fit.

Usage

Place your canvas element wherever you want it to appear in your document:

<canvas id="mycanvas" width="90" height="18"></canvas>

You can link to the sparkline.js file at the end of your HTML document and then call the function afterwards:

<script src="sparkline.js"></script>
<script>
sparkline ('mycanvas', [145, 123, 121, 78, 23, 9, 23, 24, 25, 89, 35, 124, 78, 98], true);
</script>

Or you can inline the sparkline function at the bottom of your document (to avoid the extra HTTP request):

<script>
var sparkline = function(canvas_id, data, endpoint, color, style) {
...
};
sparkline('mycanvas', [145, 123, 121, 78, 23, 9, 23, 24, 25, 89, 35, 124, 78, 98], true, 'rgba(0,0,255,.5)','line');
</script>

You can see the script in action on member profiles on the website The Session e.g. http://thesession.org/members/1

Something went wrong with that request. Please try again.