3 ms·

jQuery plugin for generating sparklines

26 points by nickb 18y ago

lyime 18y ago
This is going to be really useful for some of our in house analytics for our project.
jmtame 18y ago
awesome plugin for an awesome library
technoguyrob 18y ago
I have not dug into the code, but how does this work for IE? Firebug tells me it uses the canvas tag which makes sense, but in IE6 that tag is not supported but the code still works. Is it inline images of the form <img>[Bitmap data]</img> or what? EDIT: Clever, looks like it uses the IE-supported XML shapes (this is how Frontpage exports simple shape graphics). The javascript line javascript:prompt('',$($('.line')[0]).html()) produced <SPAN style="PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 21px; PADDING-TOP: 0px; HEIGHT: 16px" width="21" height="16"> <?xml:namespace prefix = v /><v:group style="LEFT: 0px; WIDTH: 21px; POSITION: relative; TOP: 0px; HEIGHT: 16px" jQuery1216275956207="2" coordsize = "21,16"> <v:shape style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 21px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 16px" coordsize = "21,16" filled = "t" fillcolor = "#cdf" stroked = "f" path = " m0,15 l0,1,3,5,6,3,10,15,13,11,16,5,19,11,19,15 e"> </v:shape> <v:shape style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 21px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 16px" coordsize = "21,16" filled = "f" strokecolor = "blue" strokeweight = "1pt" path = " m0,1 l0,1,3,5,6,3,10,15,13,11,16,5,19,11 e"> </v:shape> <v:oval style="LEFT: 16px; WIDTH: 4px; POSITION: absolute; TOP: 9px; HEIGHT: 4px" coordsize = "21600,21600" filled = "t" fillcolor = "#f80" stroked = "f"></v:oval></v:group></SPAN>
jamongkad 18y ago
Lovely plugin! Reminds me of JQuery Plot but with a more elegant API.
xeno42 18y ago
technoguyrob: Yep I wrote it to use Canvas for browsers that support it, VML for Internet Explorer.

26 points by nickb 18y ago

lyime 18y ago

This is going to be really useful for some of our in house analytics for our project.

jmtame 18y ago

awesome plugin for an awesome library

technoguyrob 18y ago

I have not dug into the code, but how does this work for IE? Firebug tells me it uses the canvas tag which makes sense, but in IE6 that tag is not supported but the code still works. Is it inline images of the form <img>[Bitmap data]</img> or what? EDIT: Clever, looks like it uses the IE-supported XML shapes (this is how Frontpage exports simple shape graphics). The javascript line javascript:prompt('',$($('.line')[0]).html()) produced <SPAN style="PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 21px; PADDING-TOP: 0px; HEIGHT: 16px" width="21" height="16"> <?xml:namespace prefix = v /><v:group style="LEFT: 0px; WIDTH: 21px; POSITION: relative; TOP: 0px; HEIGHT: 16px" jQuery1216275956207="2" coordsize = "21,16"> <v:shape style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 21px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 16px" coordsize = "21,16" filled = "t" fillcolor = "#cdf" stroked = "f" path = " m0,15 l0,1,3,5,6,3,10,15,13,11,16,5,19,11,19,15 e"> </v:shape> <v:shape style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 21px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 16px" coordsize = "21,16" filled = "f" strokecolor = "blue" strokeweight = "1pt" path = " m0,1 l0,1,3,5,6,3,10,15,13,11,16,5,19,11 e"> </v:shape> <v:oval style="LEFT: 16px; WIDTH: 4px; POSITION: absolute; TOP: 9px; HEIGHT: 4px" coordsize = "21600,21600" filled = "t" fillcolor = "#f80" stroked = "f"></v:oval></v:group></SPAN>

jamongkad 18y ago

Lovely plugin! Reminds me of JQuery Plot but with a more elegant API.

xeno42 18y ago

technoguyrob: Yep I wrote it to use Canvas for browsers that support it, VML for Internet Explorer.