SparkLine refactored

[jean-cédric]

When we use sparkline we espect a convenient lightweight histogram
generator...
But in fact the original sparkline isn't accurate and magik number
galore…

So, I make this (bonus, the array.prototype.clear() function ^^) :

/***
|''Name''|SparklinePlugin|
|''Description''|provides support for [[sparklines|http://
www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1]]|
|''Version''|2.0.0|
|''Status''|stable|
|''Source''|http://www.tiddlywiki.com/plugins.html#SparklinePlugin|
|''~CodeRepository:''|http://svn.tiddlywiki.org/Trunk/association/
plugins/SparklinePlugin/SparklinePlugin.js |
|''License''|[[BSD open source license]]|
|''~CoreVersion''|2.4.1|
|''Feedback''|[[TiddlyWiki community|http://groups.google.com/group/
TiddlyWiki]] |
|''Keywords''|visualization|
!Usage
{{{
<<sparkline numbers>>
}}}
The macro accepts space-separated numeric values as parameter.
!!Examples
Activity on http://www.tiddlywiki.com during the month of April 2005:
{{{<<sparkline 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>>}}}
<<sparkline 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>>
!Code
***/
//{{{
if(!version.extensions.SparklinePlugin) {
version.extensions.SparklinePlugin = {installed:true};

//--
//-- Sparklines
//--

config.macros.sparkline = {};

config.macros.sparkline.byNum = function(a,b)
{
return parseInt(b)-parseInt(a);
};
config.macros.sparkline.handler = function(place,macroName,params)
{
var data = [];
var min;
var max;
var highest = [];
var boxHeight = 100;
var tickWidth = 10;
var tickBorderWidth = 0;
var datalength = 0;
var v;
for(var t=0; t<params.length; t++) {
v = parseInt(params[t]);
if(v < min)
min = v;
if(v > max)
max = v;
data.push(v);
}
if(data.length < 1){
return;
}else{
highest.clear();
datalength += data.length;
for (var i = 0, item; item = data[i]; i++ ){
highest[i] = item;
}
highest.sort(config.macros.sparkline.byNum);
}

var box = createTiddlyElement(place,"span",null,"sparkline",'');
box.title = data.join(",");
box.style.display = 'block';
box.style.width = datalength * tickWidth+"px";
box.style.height = boxHeight+"px";
style.position = "relative";

for( var i = 0 ; i < datalength ; i++ ) {
var tick = document.createElement("img");
tick.border = tickBorderWidth;
tick.className = "sparktick";
tick.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF
%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C
%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";

tick.style.width = tickWidth+'px';
tick.style.height = (isNaN((data[i]/highest[0])*boxHeight)?
boxHeight:parseInt((data[i]/highest[0])*boxHeight)) +"px";
tick.style.height += "px";
tick.style.float = 'left';
box.appendChild(tick);
}
};


}
//}}}

//{{{
// Add clear function
Array.prototype.clear = function()
{
for(var i=0, item; item = this[i]; i++) {
delete item;
}
if(this.length > 0){return -1;}
else{return 0;}
};
//}}}

[jean-cédric]

oups, I made a mistake somewhere :s

[jean-cédric]

box.style.height = boxHeight+"px";
style.position = "relative";

=

box.style.height = boxHeight+"px";
box.style.position = "relative";


(thanx to the f***ing touchpad)

[FND]

> the original sparkline isn't accurate and magik number galore…

Thanks for that contribution! (I have to admit though that I'm not sure
what's changed.)

Since Google Groups automatically wraps long lines, could you use a
pastebin* to share the code (and possibly even generate a patch)?

-- F.

* e.g. http://tiddlywiki.pastebin.com

[jean-cédric]

http://pastebin.com/f5898549d

the major changes : all

In fact sparkline's columns aren't proportionnal to datas, ex : 14
will make a 100px high column, 9 a 97 px and 1 = 0 px (report the
100px to the original sparkline height)

And sparkline aren't customisable in width and height (I can do better
than this solution, like a fixed histogram width and the column width
a division of it).

[FND]

> the major changes : all

Hehe - I've raised a ticket and created a patch from your code:
http://trac.tiddlywiki.org/ticket/761
http://trac.tiddlywiki.org/attachment/ticket/761/ticke761.patch

> And sparkline aren't customisable in width and height (I can do better
> than this solution, like a fixed histogram width and the column width
> a division of it).

That'd be quite nice, I guess.

I'm not sure why the Array.prototype.clear function is needed - what's
the advantage over using "arr = [];"?

-- F.

[jean-cédric]

> Hehe - I've raised a ticket and created a patch from your code:
>      http://trac.tiddlywiki.org/ticket/761
>      http://trac.tiddlywiki.org/attachment/ticket/761/ticke761.patch

thank you

> I'm not sure why the Array.prototype.clear function is needed - what's
> the advantage over using "arr = [];"?

Calm the violent head pain of a crazy dev on early morning by code
berzerking, but I think you begin to be accustomed to my
"prototype.function ()" which serve no purpose ;D.

[jean-cédric]

Maybe i'll post my prototype.function() that jungle with the value and
keys of an array... it's pretty fun to see how this can be useless.
The art of programming… this sentence take a new sense with me ;P .