5 ms·

JQuery Sparklines

201 points by kordless 17y ago

mshron 17y ago
I will definitely be using this. The most crucial part is in place, namely the ability to use sparklines within a line of text. Now I will be able to seamlessly blend context and data everywhere I go.
mootothemax 17y ago
The mouse speed one is incredible! Now I'm just trying to work out how to fit these in to the stats section of my websites, great piece of coding!
- Tawheed 17y ago
  Sorry dude, I fat fingered on my iPad and hit the down arrow instead of hitting up. The mouse demo thing was killer.
  - mootothemax 17y ago
    No worries :) I really like the idea of using the mouse demo for a pretty useless display of say, current processing levels, which'll make every geek's eyes roll and get the guys in marketing salivating ;)
- xeno42 17y ago
  The mouse speed demo has been pretty popular - I think the best actual example of that technique in action that I've seen using jQuery Sparklines can be seen at the Firefox download stats page: http://www.mozilla.com/en-US/firefox/stats/ http://www.mozilla.com/en-US/firefox/stats/
  - mootothemax 17y ago
    Seriously, seriously cool demo there, and just the kind of thing I can see lots of people enjoying :)
  - ck2 17y ago
    Anyone know what they are using to do the world map on there? oh nevermind, I see it now at the bottom Alistair MacDonald of hyper-metrix.com for the SVG+Canvas world map
- paraschopra 17y ago
  This is a great library. We dumped Flash and npw use a modified version of Sparklines in our reports. Have a look at an example here: http://dev.visualwebsiteoptimizer.com/test_report.php?test_id=20&demo=1 http://dev.visualwebsiteoptimizer.com/test_report.php?test_i... A bit unrelated to this but any ideas how we can improve the reports? Specifically thinking of providing little line chart sparklines for traffic next to each variation.
trickjarrett 17y ago
This has been around for a few years, it's rock solid and very awesome.
xeno42 17y ago
I wrote this a couple of years ago and it's been very nice to see the amount of attention it's received; I probably receive an email a day about it on average. Just wish I had a bit more time to add one or two of the most requested features, though I'm deliberately not adding too much - There are much better tools for generating full sized charts in Javascript.
- thibaut_barrere 17y ago
  I will definitely use it. Thanks for both writing it and promoting it :)
- paraschopra 17y ago
  Thanks for writing it! No seriously, thanks. Flot is one the best full sized chart libraries. And yours is the best Sparkline library we could find.
- kordless 17y ago
  We're using Sparklines and Highcharts. Highcharts is cool because you can get the zoom and select range thing going on with eventing to do updates. Frankly you've saved us a ton of time from writing this ourselves, so please accept my undying thanks! Now if we could just get a jQuery plugin that would turn on those Woot lights of yours...
- durin42 17y ago
  Many have said so, and I don't know if you'll check this thread, but many many thanks for this library. I've only ever used it on internal tools (and the ones worth sharing belong to my now-former employer), but it was really a joy to work with. I keep looking for places where I can use it in the future.
  - xeno42 17y ago
    I did and thanks for the comment - It's really great to hear people's success stories :-)
gojomo 17y ago
I've often wanted the pattern of upvotes/downvotes of a comment to be visible in sparkline form (much like the 'SF Giants' win/loss example on the top right of this page). Why? I think a +2 comment that is 100 upvotes and 99 downvotes is more interesting than one with a single upvote. It's also interesting to see the comment-voting that changes direction once conversation progresses, or when a different audience shows up (for example, at night). (These could be indicated by extra ticks when followup comments are posted, or background shading to indicate time-of-day.) It'd be too much to include these in the main threaded view, but as an extra detail (like the 'flag' button) on individual-comment pages, with soft enough colors, it could be interesting.
- deleted 17y ago
  [deleted]
noonespecial 17y ago
I didn't know this existed, tortuously bodged together my own terrible version of this, and then had that moment of mixed joy and derision upon discovering that someone had done it ridiculously better than me. Guess that's open source for ya. Its awesomeness quickly dispelled any disappointment at scrapping my own version!
jerome_etienne 17y ago
good demo page. all in one page. i like the interactive part
3ds 17y ago
I've really come to like flot http://code.google.com/p/flot/ http://code.google.com/p/flot/ The head revision also supports pie charts, which are pretty sweet.
ck2 17y ago
Before Amazon does it, someone should patent identifying a user based on their mouse speed and gestures!
lenni 17y ago
I'm really wondering why all these graphing libraries seem to be preferring canvas over SVG. Nothing wrong with canvas but doesn't SVG integrate much better with the DOM and aren't graphs a really good example of a vector graphic?
pierrefar 17y ago
Works on my G1 Android. Nice! The mouse demo doesn't tho, which is not surprising.

201 points by kordless 17y ago

I will definitely be using this. The most crucial part is in place, namely the ability to use sparklines within a line of text. Now I will be able to seamlessly blend context and data everywhere I go.

mootothemax 17y ago

The mouse speed one is incredible! Now I'm just trying to work out how to fit these in to the stats section of my websites, great piece of coding!

Tawheed 17y ago
Sorry dude, I fat fingered on my iPad and hit the down arrow instead of hitting up. The mouse demo thing was killer.
- mootothemax 17y ago
  No worries :) I really like the idea of using the mouse demo for a pretty useless display of say, current processing levels, which'll make every geek's eyes roll and get the guys in marketing salivating ;)
xeno42 17y ago
The mouse speed demo has been pretty popular - I think the best actual example of that technique in action that I've seen using jQuery Sparklines can be seen at the Firefox download stats page: http://www.mozilla.com/en-US/firefox/stats/ http://www.mozilla.com/en-US/firefox/stats/
- mootothemax 17y ago
  Seriously, seriously cool demo there, and just the kind of thing I can see lots of people enjoying :)
- ck2 17y ago
  Anyone know what they are using to do the world map on there? oh nevermind, I see it now at the bottom Alistair MacDonald of hyper-metrix.com for the SVG+Canvas world map
paraschopra 17y ago
This is a great library. We dumped Flash and npw use a modified version of Sparklines in our reports. Have a look at an example here: http://dev.visualwebsiteoptimizer.com/test_report.php?test_id=20&demo=1 http://dev.visualwebsiteoptimizer.com/test_report.php?test_i... A bit unrelated to this but any ideas how we can improve the reports? Specifically thinking of providing little line chart sparklines for traffic next to each variation.

trickjarrett 17y ago

This has been around for a few years, it's rock solid and very awesome.

xeno42 17y ago

I wrote this a couple of years ago and it's been very nice to see the amount of attention it's received; I probably receive an email a day about it on average. Just wish I had a bit more time to add one or two of the most requested features, though I'm deliberately not adding too much - There are much better tools for generating full sized charts in Javascript.

thibaut_barrere 17y ago
I will definitely use it. Thanks for both writing it and promoting it :)
paraschopra 17y ago
Thanks for writing it! No seriously, thanks. Flot is one the best full sized chart libraries. And yours is the best Sparkline library we could find.
kordless 17y ago
We're using Sparklines and Highcharts. Highcharts is cool because you can get the zoom and select range thing going on with eventing to do updates. Frankly you've saved us a ton of time from writing this ourselves, so please accept my undying thanks! Now if we could just get a jQuery plugin that would turn on those Woot lights of yours...
durin42 17y ago
Many have said so, and I don't know if you'll check this thread, but many many thanks for this library. I've only ever used it on internal tools (and the ones worth sharing belong to my now-former employer), but it was really a joy to work with. I keep looking for places where I can use it in the future.
- xeno42 17y ago
  I did and thanks for the comment - It's really great to hear people's success stories :-)

gojomo 17y ago

I've often wanted the pattern of upvotes/downvotes of a comment to be visible in sparkline form (much like the 'SF Giants' win/loss example on the top right of this page). Why? I think a +2 comment that is 100 upvotes and 99 downvotes is more interesting than one with a single upvote. It's also interesting to see the comment-voting that changes direction once conversation progresses, or when a different audience shows up (for example, at night). (These could be indicated by extra ticks when followup comments are posted, or background shading to indicate time-of-day.) It'd be too much to include these in the main threaded view, but as an extra detail (like the 'flag' button) on individual-comment pages, with soft enough colors, it could be interesting.

deleted 17y ago
[deleted]

noonespecial 17y ago

I didn't know this existed, tortuously bodged together my own terrible version of this, and then had that moment of mixed joy and derision upon discovering that someone had done it ridiculously better than me. Guess that's open source for ya. Its awesomeness quickly dispelled any disappointment at scrapping my own version!

jerome_etienne 17y ago

good demo page. all in one page. i like the interactive part

3ds 17y ago

I've really come to like flot http://code.google.com/p/flot/ http://code.google.com/p/flot/ The head revision also supports pie charts, which are pretty sweet.

ck2 17y ago

Before Amazon does it, someone should patent identifying a user based on their mouse speed and gestures!

lenni 17y ago

I'm really wondering why all these graphing libraries seem to be preferring canvas over SVG. Nothing wrong with canvas but doesn't SVG integrate much better with the DOM and aren't graphs a really good example of a vector graphic?

pierrefar 17y ago

Works on my G1 Android. Nice! The mouse demo doesn't tho, which is not surprising.