Re: [jQuery] New plugin: sparkline
Argh! Does the ML reformat email?
sparkline.js-safari.patch
Description: Binary data
On Oct 9, 2006, at 2:03 PM, Corey Jewett wrote:
Fixes for Safari:
* Apple added Canvas for Dashboard (Tiger) and backported to Panther
(as Safari 1.3), in the Mac world that's virtually everyone.
Therefore, I added an explicit pass through for Safari because I
can't find documentation for proper object detection. :(
* The correct usage of stroking is to define the start point
(moveTo), followed by your other commands (lineTo, etc).[2]
* I back tested against FireFox 1.5 (OS X), don't have anything else
handy at the moment. Sorry.
Corey
1. http://developer.apple.com/documentation/AppleApplications/
Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/
30001240-53879
2. http://developer.apple.com/documentation/AppleApplications/
Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/
30001240-54100
--- sparkline.js2006-10-09 13:53:09.0 -0700
+++ sparkline.safari.js 2006-10-09 13:54:53.0 -0700
@@ -62,7 +62,7 @@
jQuery('#x_x_x').remove();
// Use a canvas element
- if (options.useCanvas &&
window.CanvasRenderingContext2D) {
+ if (options.useCanvas &&
(window.CanvasRenderingContext2D || jQuery.browser.safari)) {
var id = '__' + (new Date).getTime();
w = options.width * data.length;
@@ -84,7 +84,12 @@
c.beginPath();
for (var i = 0; i <
data.length; ++i) {
var v = Math.floor
(((data[i] - min) / (max - min)) * h);
- c.lineTo(w * i /
(data.length - 1), h - v);
+
+ if (i == 0) {
+ c.moveTo(w * i /
(data.length - 1), h - v);
+ } else {
+ c.lineTo(w * i /
(data.length - 1), h - v);
+ }
}
c.stroke();
}
On Oct 7, 2006, at 3:56 AM, Franck Marcia wrote:
Hi all,
I've released a new plugin: sparkline. A sparkline is an inline
graphic (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?
msg_id=0001OR&topic_id=1).
I borrowed the idea (and most of the code) from the TiddlyWiki
project, a very good one-page wiki (http://www.tiddlywiki.com).
Thanks
to Jeremy Ruston for his work and his permission.
Here is the link to the test page:
http://fmarcia.info/jquery/sparkline/sparkline.html
It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6,
IE7RC1 and Opera 9.02. However, even if it works fine with FF on
Linux, it doesn't behave correctly with Konqueror. I assume it's the
same with Safari...
As usual, any comment appreciated.
Cheers,
Franck.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
Fixes for Safari:
* Apple added Canvas for Dashboard (Tiger) and backported to Panther
(as Safari 1.3), in the Mac world that's virtually everyone.
Therefore, I added an explicit pass through for Safari because I
can't find documentation for proper object detection. :(
* The correct usage of stroking is to define the start point
(moveTo), followed by your other commands (lineTo, etc).[2]
* I back tested against FireFox 1.5 (OS X), don't have anything else
handy at the moment. Sorry.
Corey
1. http://developer.apple.com/documentation/AppleApplications/
Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/
30001240-53879
2. http://developer.apple.com/documentation/AppleApplications/
Reference/SafariJSRef/Classes/Canvas.html#//apple_ref/doc/uid/
30001240-54100
--- sparkline.js2006-10-09 13:53:09.0 -0700
+++ sparkline.safari.js 2006-10-09 13:54:53.0 -0700
@@ -62,7 +62,7 @@
jQuery('#x_x_x').remove();
// Use a canvas element
- if (options.useCanvas &&
window.CanvasRenderingContext2D) {
+ if (options.useCanvas &&
(window.CanvasRenderingContext2D || jQuery.browser.safari)) {
var id = '__' + (new Date).getTime();
w = options.width * data.length;
@@ -84,7 +84,12 @@
c.beginPath();
for (var i = 0; i <
data.length; ++i) {
var v = Math.floor
(((data[i] - min) / (max - min)) * h);
- c.lineTo(w * i /
(data.length - 1), h - v);
+
+ if (i == 0) {
+ c.moveTo(w * i /
(data.length - 1), h - v);
+ } else {
+ c.lineTo(w * i /
(data.length - 1), h - v);
+ }
}
c.stroke();
}
On Oct 7, 2006, at 3:56 AM, Franck Marcia wrote:
> Hi all,
>
> I've released a new plugin: sparkline. A sparkline is an inline
> graphic (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?
> msg_id=0001OR&topic_id=1).
>
> I borrowed the idea (and most of the code) from the TiddlyWiki
> project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks
> to Jeremy Ruston for his work and his permission.
>
> Here is the link to the test page:
> http://fmarcia.info/jquery/sparkline/sparkline.html
>
> It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6,
> IE7RC1 and Opera 9.02. However, even if it works fine with FF on
> Linux, it doesn't behave correctly with Konqueror. I assume it's the
> same with Safari...
>
> As usual, any comment appreciated.
>
> Cheers,
>
> Franck.
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
2006/10/9, dizzledorf <[EMAIL PROTECTED]>: > > Nice work, Franck. > Thank you. > How do I get the sparklines to work with negative values? > I plan to integrate it soon. Franck. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
Nice work, Franck. How do I get the sparklines to work with negative values? e.g. A vertical bar graph with a 0 line, displaying green bars for + values, and red for -. Franck Marcia wrote: > > Hi all, > > I've released a new plugin: sparkline. A sparkline is an inline > graphic > (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1). > > I borrowed the idea (and most of the code) from the TiddlyWiki > project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks > to Jeremy Ruston for his work and his permission. > > Here is the link to the test page: > http://fmarcia.info/jquery/sparkline/sparkline.html > > It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, > IE7RC1 and Opera 9.02. However, even if it works fine with FF on > Linux, it doesn't behave correctly with Konqueror. I assume it's the > same with Safari... > > As usual, any comment appreciated. > > Cheers, > > Franck. > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/New-plugin%3A-sparkline-tf2400191.html#a6722040 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
Great code, lots of options, I could see extending it for every thinkable graph format. perhaps method:block|line|.. instead of useCanvas: true|false. Not being an expert on canvas, I would assume there is a fill in the polygon type command that could help instead of the span? On 10/7/06, Franck Marcia <[EMAIL PROTECTED]> wrote: > 2006/10/7, John Resig <[EMAIL PROTECTED]>: > > Franck - Doing a quick check to see if the user is using IE, or not, > > you could be able to use the Canvas element no problem. > > OK, I did it. Same address: > http://fmarcia.info/jquery/sparkline/sparkline.html > > However, just one color in this case as it doesn't make sense, imo. > > And there's a problem with the position of the canvas element I can > solve for the moment. I set the background of the container, a span > element, to black to see it. (any idea?) > > Cheers, > > Franck. > -- Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
2006/10/7, John Resig <[EMAIL PROTECTED]>: > Franck - Doing a quick check to see if the user is using IE, or not, > you could be able to use the Canvas element no problem. OK, I did it. Same address: http://fmarcia.info/jquery/sparkline/sparkline.html However, just one color in this case as it doesn't make sense, imo. And there's a problem with the position of the canvas element I can solve for the moment. I set the background of the container, a span element, to black to see it. (any idea?) Cheers, Franck. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
I am a total sucker for images without files! I really like the use of a tiny inline image with different bg colors. I experimented with inline images in an atom feed... it didn't work for all feed readers! I also like the canvas method that John used, I look forward to your merged version! On 10/7/06, Franck Marcia <[EMAIL PROTECTED]> wrote: > @ Karl: thank you for the info. > > @ John: I will take a look at canvas; I missed your implementation but > now, I will certainly borrow some parts ;-) > > Cheers, > > Franck. > > 2006/10/7, John Resig <[EMAIL PROTECTED]>: > > Back in the day I wrote some sparkline code myself: > > http://ejohn.org/apps/jspark/ > > > > This particular one uses the Canvas element (giving it a nice > > antialias). My code looks kind of scary, in retrospect, but it seems > > like it wouldn't be too bad to give it a jQuery facelift. > > > > Franck - Doing a quick check to see if the user is using IE, or not, > > you could be able to use the Canvas element no problem. > > > > --John > > > > On 10/7/06, Franck Marcia <[EMAIL PROTECTED]> wrote: > > > Hi all, > > > > > > I've released a new plugin: sparkline. A sparkline is an inline > > > graphic > > > (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1). > > > > > > I borrowed the idea (and most of the code) from the TiddlyWiki > > > project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks > > > to Jeremy Ruston for his work and his permission. > > > > > > Here is the link to the test page: > > > http://fmarcia.info/jquery/sparkline/sparkline.html > > > > > > It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, > > > IE7RC1 and Opera 9.02. However, even if it works fine with FF on > > > Linux, it doesn't behave correctly with Konqueror. I assume it's the > > > same with Safari... > > > > > > As usual, any comment appreciated. > > > > > > Cheers, > > > > > > Franck. > > > > > > ___ > > > jQuery mailing list > > > discuss@jquery.com > > > http://jquery.com/discuss/ > > > > > > > > > -- > > John Resig > > http://ejohn.org/ > > [EMAIL PROTECTED] > > > > ___ > > jQuery mailing list > > discuss@jquery.com > > http://jquery.com/discuss/ > > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > -- Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
@ Karl: thank you for the info. @ John: I will take a look at canvas; I missed your implementation but now, I will certainly borrow some parts ;-) Cheers, Franck. 2006/10/7, John Resig <[EMAIL PROTECTED]>: > Back in the day I wrote some sparkline code myself: > http://ejohn.org/apps/jspark/ > > This particular one uses the Canvas element (giving it a nice > antialias). My code looks kind of scary, in retrospect, but it seems > like it wouldn't be too bad to give it a jQuery facelift. > > Franck - Doing a quick check to see if the user is using IE, or not, > you could be able to use the Canvas element no problem. > > --John > > On 10/7/06, Franck Marcia <[EMAIL PROTECTED]> wrote: > > Hi all, > > > > I've released a new plugin: sparkline. A sparkline is an inline > > graphic > > (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1). > > > > I borrowed the idea (and most of the code) from the TiddlyWiki > > project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks > > to Jeremy Ruston for his work and his permission. > > > > Here is the link to the test page: > > http://fmarcia.info/jquery/sparkline/sparkline.html > > > > It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, > > IE7RC1 and Opera 9.02. However, even if it works fine with FF on > > Linux, it doesn't behave correctly with Konqueror. I assume it's the > > same with Safari... > > > > As usual, any comment appreciated. > > > > Cheers, > > > > Franck. > > > > ___ > > jQuery mailing list > > discuss@jquery.com > > http://jquery.com/discuss/ > > > > > -- > John Resig > http://ejohn.org/ > [EMAIL PROTECTED] > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
Back in the day I wrote some sparkline code myself: http://ejohn.org/apps/jspark/ This particular one uses the Canvas element (giving it a nice antialias). My code looks kind of scary, in retrospect, but it seems like it wouldn't be too bad to give it a jQuery facelift. Franck - Doing a quick check to see if the user is using IE, or not, you could be able to use the Canvas element no problem. --John On 10/7/06, Franck Marcia <[EMAIL PROTECTED]> wrote: > Hi all, > > I've released a new plugin: sparkline. A sparkline is an inline > graphic > (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1). > > I borrowed the idea (and most of the code) from the TiddlyWiki > project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks > to Jeremy Ruston for his work and his permission. > > Here is the link to the test page: > http://fmarcia.info/jquery/sparkline/sparkline.html > > It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, > IE7RC1 and Opera 9.02. However, even if it works fine with FF on > Linux, it doesn't behave correctly with Konqueror. I assume it's the > same with Safari... > > As usual, any comment appreciated. > > Cheers, > > Franck. > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > -- John Resig http://ejohn.org/ [EMAIL PROTECTED] ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] New plugin: sparkline
On Oct 7, 2006, at 6:56 AM, Franck Marcia wrote: > I've released a new plugin: sparkline. A sparkline is an inline > graphic (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg? > msg_id=0001OR&topic_id=1). > > I borrowed the idea (and most of the code) from the TiddlyWiki > project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks > to Jeremy Ruston for his work and his permission. > > Here is the link to the test page: > http://fmarcia.info/jquery/sparkline/sparkline.html > > It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, > IE7RC1 and Opera 9.02. However, even if it works fine with FF on > Linux, it doesn't behave correctly with Konqueror. I assume it's the > same with Safari... Cool plugin! Looks good to me in Safari. Cheers, Karl ___ Karl Swedberg www.englishrules.com www.learningjquery.com ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
[jQuery] New plugin: sparkline
Hi all, I've released a new plugin: sparkline. A sparkline is an inline graphic (http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1). I borrowed the idea (and most of the code) from the TiddlyWiki project, a very good one-page wiki (http://www.tiddlywiki.com). Thanks to Jeremy Ruston for his work and his permission. Here is the link to the test page: http://fmarcia.info/jquery/sparkline/sparkline.html It's tested successfully on Windows XP with FF1.5.07, IE5.5, IE6, IE7RC1 and Opera 9.02. However, even if it works fine with FF on Linux, it doesn't behave correctly with Konqueror. I assume it's the same with Safari... As usual, any comment appreciated. Cheers, Franck. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
