[thelist] Sparklines implementation

Courtenay court3nay at gmail.com
Wed Oct 27 16:45:42 CDT 2004


> Javascript??? Could you explain that a little further? I must be missing
> something here.

My logic in doing it in Javascript is so that people without server
scripting access (all those bloggers) can drop it into their page
without too much difficulty.

Yeah.... I'm also a little skeptical of the no-javascript stats. 
I also only code for Safari, Mozillla and IE6.  Shoot me. :)

But seriously, javascript works better for my own nefarious purposes,
and by basically rendering it in text means it'll scale in EMs...

> {Thanks, BTW, to whoever put up the initial link!}

You're welcome ;)

> The binomial (win/loss, over/under, heads/tails) example in particular
> seemed like a simple place to start.

Could do this in pure CSS, methinks.  :)   would resize nicely, too.
Maybe using borders or filled blocks or (gasp) table cells.

> The problem with the above approach is that it doesn't seem to capture
> one of the essential characteristics of a sparkline ... the ability to
> use them "as a word".

How about a DIV full of numbers

<div class='sparkline'>1,0,1,0,1,1,0</div>

then hide it in css
.sparkline {
  display:none }

then javascript it to convert the numbers to up/down boxes.

var sparks = document.getElementsByTagName('div')
for (i=0; i<sparks.length; i++) {
 if (sparks[i].className=='sparkline')
{
  var values = sparks[i].innerHTML.split(",");
  for (j=0; j<values.length; j++)    
  {
    do the magic here. haven't worked out *what* exactly that is, yet. 
  }
}


> That would seem to imply the ability to use them 'in-line', flowing text
> around them, and having them keep their same relative position (and
> relative importance) within the text through 'liquid' resizing movements.
> Whew! Tall order!

right, and make the height etc in EMs.


> You might be able to handle some of that in JS, but I think it would be
> pretty tough - if you had more than one sparkline, or you wanted folks to
> be able to edit the other text again, or if users turned off JS, or if
> users had their own style sheet settings and increased or decreased font
> size ...

> I think it would almost be easier to define and embed a 'sparkline' font
> into your page. 

A good idea, each 'letter' is a normalized vertical position on a
graph,  so you only really need 20 letters.... innnnteresting. 
reminds me of the old ASCII art days   _.,-~'\


More information about the thelist mailing list