Skip to content

Instantly share code, notes, and snippets.

@garcon
Created November 20, 2009 20:40
Show Gist options
  • Save garcon/239764 to your computer and use it in GitHub Desktop.
Save garcon/239764 to your computer and use it in GitHub Desktop.
Sparkline.js
/**
* Javascript Sparklines Library
* Written By John Resig
* http://ejohn.org/projects/jspark/
*
* This work is tri-licensed under the MPL, GPL, and LGPL:
* http://www.mozilla.org/MPL/
*
* To use, place your data points within your HTML, like so:
* <span class="sparkline">10,8,20,5...</span>
*
* in your CSS you might want to have the rule:
* .sparkline { display: none }
* so that non-compatible browsers don't see a huge pile of numbers.
*
* Finally, include this library in your header, like so:
* <script language="javascript" src="jspark.js"></script>
*/
addEvent( window, "load", function() {
var a = document.getElementsByTagName("*") || document.all;
for ( var i = 0; i < a.length; i++ )
if ( has( a[i].className, "sparkline" ) )
sparkline( a[i] );
} );
function has(s,c) {
var r = new RegExp("(^| )" + c + "\W*");
return ( r.test(s) ? true : false );
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
function sparkline(o) {
var p = o.innerHTML.split(',');
while ( o.childNodes.length > 0 )
o.removeChild( o.firstChild );
var nw = "auto";
var nh = "auto";
if ( window.getComputedStyle ) {
nw = window.getComputedStyle( o, null ).width;
nh = window.getComputedStyle( o, null ).height;
}
if ( nw != "auto" ) nw = nw.substr( 0, nw.length - 2 );
if ( nh != "auto" ) nh = nh.substr( 0, nh.length - 2 );
var f = 2;
var w = ( nw == "auto" || nw == 0 ? p.length * f : nw - 0 );
var h = ( nh == "auto" || nh == 0 ? "1em" : nh );
var co = document.createElement("canvas");
if ( co.getContext ) o.style.display = 'inline';
else return false;
co.style.height = h;
co.style.width = w;
co.width = w;
o.appendChild( co );
var h = co.offsetHeight;
co.height = h;
var min = 9999;
var max = -1;
for ( var i = 0; i < p.length; i++ ) {
p[i] = p[i] - 0;
if ( p[i] < min ) min = p[i];
if ( p[i] > max ) max = p[i];
}
if ( co.getContext ) {
var c = co.getContext("2d");
c.strokeStyle = "red";
c.lineWidth = 1.0;
c.beginPath();
for ( var i = 0; i < p.length; i++ ) {
if ( i == 0 )
c.moveTo( (w / p.length) * i, h - (((p[i] - min) / (max - min)) * h) );
c.lineTo( (w / p.length) * i, h - (((p[i] - min) / (max - min)) * h) );
}
c.stroke();
o.style.display = 'inline';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment