[thelist] Sparklines implementation: Fully EM scalable!

Courtenay court3nay at gmail.com
Wed Oct 27 17:49:47 CDT 2004


Well, here's what I got so far.  This is great for those baseball
stats Tufte mentioned:
IMO they can be used for good as well as evil...... these things can
easily look horrible.
Would love to hear some feedback on the code.  

Works in IE6, Firefox 1.0pr, Opera 7.23

The whole sparkline is a SPAN so it inlines nicely. (Solves that word problem.)

The blocks are also SPANs with heights and relative positions altered.
They contain a period so that Opera displays the empty spans. (&nbsp
didn't work).  Any non-binary value gets displayed (For future use in
the glucose-style graph)

The source span (with the binary) can come from ASP or PHP or CFM or
your grandma's bottom drawer.   In the absence of a javascript memory
analysis tool, I can't guarantee that it scales beyond a few
sparklines, but there's no reason why it shouldn't.

<head>
<style type='text/css'>
.sparkline { 
 display:none; 
 color:#ccc;
}
.sparkline span {
 position:relative;
 background-color:#ccc;
 font-size:0.5em;
}
span.up {
 top: -0.5em;
}
span.dn {
 top:0.5em;
}
</style>

<script type='text/javascript'>
function init()
{
  var sparks = document.getElementsByTagName('span');
  window.status = sparks.length;
  for (i=0; i<sparks.length; i++)
  {
    window.status = sparks[i].className;
    if (sparks[i].className == 'sparkline')
	{
          sparks[i].style.display = "inline";

          /* convert binary values to up/down values */
	  var values = sparks[i].innerHTML.split(",");
	  sparks[i].innerHTML = '';
	  for (j=0; j<values.length; j++)
	  {
	    if (values[j] == 1)		
		  sparks[i].innerHTML += '<span class="up">.</span>';
		else if (values[i] == 0)
		  sparks[i].innerHTML += '<span class="dn">.</span>';
		else
		  sparks[i].innerHTML += values[j];
	  }
	}
  }
}

window.onload = init;
</script>
</head>
<body>

This is an example of <span class='sparkline'>1,0,1,1,0,0,1,1,1</span>
sparklines.

</body>


If you use this code, please use Creative Commons
Attribution-ShareAlike License. :)


More information about the thelist mailing list