weblog.masukomi.org

Client-side sparklines December 12, 2006

Ever wish you could have sparklines in your app without having to make another call to the server to generate a png/gif/svg/whatever image? Something that looked like these maybe?

Sparkline here:

Fat Sparkline here:

Unspaced sparkline here:

Unspaced fat sparkline here:

Those all have the same data, they’re just formatted differently.

The javascript is here: sparkline.js and the css is here: sparkline.css and this test example was implemented like this:

<br /> Sparkline here:<br /> <br /><span id="sparkline-1"></span><br /> <script language="JavaScript"> var sparkline1 = document.getElementById(\'sparkline-1\'); var minMax = displaySparkline(sparkline1, [163, 218, 231, 236, 232, 266, 176, 249, 289, 1041, 1835, 2285, 3098, 2101, 1755, 3283, 3353, 3335, 2898, 2224, 1404, 1354, 1825, 1839, 2142, 1942, 1784, 1145, 979, 1328, 1611]); sparkline1.innerHTML = "min: " + minMax[0] + " max: " + minMax[1] + "<br />” + sparkline1.innerHTML;</p> <p> </script></p> <p> Fat Sparkline here:<br /> <br /><span id="sparkline-5"></span><br /> <script language="JavaScript">displaySparkline(document.getElementById(\'sparkline-5\'), [163, 218, 231, 236, 232, 266, 176, 249, 289, 1041, 1835, 2285, 3098, 2101, 1755, 3283, 3353, 3335, 2898, 2224, 1404, 1354, 1825, 1839, 2142, 1942, 1784, 1145, 979, 1328, 1611], true, 8);</script></p> <p> Unspaced sparkline here:<br /> <br /><span id="sparkline-2"></span><br /> <script language="JavaScript">displaySparkline(document.getElementById(\'sparkline-2\'), [163, 218, 231, 236, 232, 266, 176, 249, 289, 1041, 1835, 2285, 3098, 2101, 1755, 3283, 3353, 3335, 2898, 2224, 1404, 1354, 1825, 1839, 2142, 1942, 1784, 1145, 979, 1328, 1611], false);</script></p> <p> Unspaced fat sparkline here:<br /> <br /><span id="sparkline-3"></span><br /> <script language="JavaScript">displaySparkline(document.getElementById(\'sparkline-3\'), [163, 218, 231, 236, 232, 266, 176, 249, 289, 1041, 1835, 2285, 3098, 2101, 1755, 3283, 3353, 3335, 2898, 2224, 1404, 1354, 1825, 1839, 2142, 1942, 1784, 1145, 979, 1328, 1611], false, 8);</script><br />

Much credit should go to TiddlyWiki for the original idea, which i then extracted, enhanced, and posted here for your enjoyment.