7 ms·

Peity - Little charts for little projects

265 points by reustle 14y ago

deleted 14y ago
[deleted]
prezjordan 14y ago
Wow, awesome! I was going to roll my own (pie charts) this weekend, but now I don't have to (probably wouldn't have been able to, anyway). This looks great, thanks!
wildmXranat 14y ago
Not bad. Resembles sparkline.
FrancescoRizzi 14y ago
Cool Sparklines and more!
osi 14y ago
also: http://omnipotent.net/jquery.sparkline/#s-about http://omnipotent.net/jquery.sparkline/#s-about
- zheng 14y ago
  So let's say I don't care about compatibility, what is the real differences between Peity and jQuery sparklines?
  - masonhensley 14y ago
    The new version of sparklines is interactive. I could be 100% wrong, but on quick inspection Piety has less functionality and less compatibility.
  - septerr 14y ago
    Never knew about Sparkline...cool. Now that I've seen it, I second your question.
  - jonstjohn 14y ago
    Size would be one, Peity is 5k uncompressed, sparklines is 119k - big difference there.
hcarvalhoalves 14y ago
Simple hacks are the best hacks.
CognitiveLens 14y ago
This looks great, and because it's based on <canvas> rendering, everything looks perfectly sharp on retina displays...
- benpickles 14y ago
  Actually it took a little work to get things crisp on retina displays - https://github.com/benpickles/peity/blob/master/jquery.peity.js#L39-50 https://github.com/benpickles/peity/blob/master/jquery.peity... I think I got the technique from here - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and http://joubert.posterous.com/crisp-html-5-canvas-text-on-mob...
pyre 14y ago
In the "Events" section, changing the value to 5/5 results in an empty pie chart, rather than a full one. 0-4 out of 5 all work correctly. Edit: The violet 16px 7/7 example in the "Tips" section on the page is also missing. Browser: Chromium 18.0.1025.151 (Developer Build 130497 Linux) Ubuntu 11.04
- reustle 14y ago
  Works fine for me (Chrome)
- keithpeter 14y ago
  Works as expected (full pie) on Firefox 13/Ubuntu
  - Craiggybear 14y ago
    Yes. Same on OS X and Firefox 13.
- pvidler 14y ago
  Also works fine on mobile safari (iPad).
rorrr 14y ago
Since you only support IE9+, I don't see how any serious project would pick your charts. IE8 is still #3 most common browser version in the world. IE7 is #5. http://gs.statcounter.com/#browser_version-ww-monthly-201105-201205 http://gs.statcounter.com/#browser_version-ww-monthly-201105...
- tosh 14y ago
  we have sub 3% IE usage at https://www.blossom.io https://www.blossom.io and most of them (56% use IE 9) so it depends on your target audience I guess :)
  - jaredonline 14y ago
    Is the lorem ipsum on your homepage on purpose?
- heretohelp 14y ago
  You'd be surprised how many serious projects aren't all that interested in IE7 and 8 users. Edit: I work for a funded startup. Let me give you some numbers: 3-5% IE users, a fraction of those using <9. Demographically, very few/if any of those are our customers. Disproportionate effort for very little benefit to our users who care about our product.
- postfuturist 14y ago
  A significant fraction of our users are on IE 7 and 8. We use this for charts, they look great on IE: http://g.raphaeljs.com/ http://g.raphaeljs.com/
- antimora 14y ago
  There is a flash based implementation of the canvas that could be used in place of missing element. It only requires a simple drop in code. http://flashcanvas.net/ http://flashcanvas.net/
  - benpickles 14y ago
    Thanks, hadn't heard of that one.
pvidler 14y ago
Very interesting, but most of these examples look like they would be fairly nonsensical to someone without JavaScript enabled (especially the line chart). To say nothing of those who use screen readers. Is there a handy way of providing some more meaningful 'alt' text? Perhaps just ignore text in the element? (I didn't check -- you may already be doing this, but I didn't see it mentioned).
- 1monthlater 14y ago
  Who isn't using javascript?
  - pvidler 14y ago
    People who keep it disabled on all but a few white-listed sites.
alinajaf 14y ago
Woohoo, Hi Ben!
sakthivelila 14y ago
i need some hacking tool
deleted 14y ago
[deleted]
gfodor 14y ago
The combination of sparklines and pie charts may just cause Tufte's head to explode.
- ema 14y ago
  Just because Tufte has taste doesn't mean he can't deal with ugliness.
SCdF 14y ago
"Peity (sounds like deity)" As someone who pronounces deity day-a-tee, I'm guessing you actually mean pee-a-tee and not pay-a-tee.
- cbsmith 14y ago
  Yeah, I was hung up on that as well. Obviously no reflection on the product/code/whatever, but when you go with "sounds like", try to pick a word that can only be pronounced one possible way.
- StavrosK 14y ago
  Why not just call it Piety?
  - benpickles 14y ago
    Yes I wish I'd done that 2 1/2 years ago!
    - StavrosK 14y ago
      Me too :-P
  - jawr 14y ago
    Skimming over the front page, I read it as petite.
- benpickles 14y ago
  Day-a-tee sounds about right - but I'm not precious. It was a deliberate miss-spelling of "pie" with some other letters added on... and quite possibly a mistake.
mseebach 14y ago
I used these in a small mockup app a little while ago. I'm aware of their inappropriateness for representing data, but for adding quick color, pop and smartness to a prototype, they performed beautifully.
tcdent 14y ago
Defining colors with the non-W3C-defined term 'colour' is cute, but annoyingly inconsistent with browser terminology.
- allolex 14y ago
  Reminds me of my .tmux.conf
- benpickles 14y ago
  Just because it's a standard doesn't mean it's spelt correctly ;) HTTP referer [sic] comes to mind http://en.wikipedia.org/wiki/HTTP_referer http://en.wikipedia.org/wiki/HTTP_referer
camtarn 14y ago
The 'delimeter' param is misspelled... should be 'delimiter'.
- reustle 14y ago
  Not my project, but you can open an issue or pull request :) https://github.com/benpickles/peity https://github.com/benpickles/peity
kmfrk 14y ago
This looks better than anything else I have seen in graph tools. Shame about the lack of fall-back options, though. What does it look like, if a browser doesn't support the graphs? Do they just disappear?
- BCM43 14y ago
  I was running without javascript, and was confused for a second when there were no example graphs.
oakwhiz 14y ago
This goes great with the HTML5 <meter> tag.

265 points by reustle 14y ago

deleted 14y ago

[deleted]

Wow, awesome! I was going to roll my own (pie charts) this weekend, but now I don't have to (probably wouldn't have been able to, anyway). This looks great, thanks!

wildmXranat 14y ago

Not bad. Resembles sparkline.

FrancescoRizzi 14y ago

Cool Sparklines and more!

osi 14y ago

also: http://omnipotent.net/jquery.sparkline/#s-about http://omnipotent.net/jquery.sparkline/#s-about

zheng 14y ago
So let's say I don't care about compatibility, what is the real differences between Peity and jQuery sparklines?
- masonhensley 14y ago
  The new version of sparklines is interactive. I could be 100% wrong, but on quick inspection Piety has less functionality and less compatibility.
- septerr 14y ago
  Never knew about Sparkline...cool. Now that I've seen it, I second your question.
- jonstjohn 14y ago
  Size would be one, Peity is 5k uncompressed, sparklines is 119k - big difference there.

hcarvalhoalves 14y ago

Simple hacks are the best hacks.

CognitiveLens 14y ago

This looks great, and because it's based on <canvas> rendering, everything looks perfectly sharp on retina displays...

benpickles 14y ago
Actually it took a little work to get things crisp on retina displays - https://github.com/benpickles/peity/blob/master/jquery.peity.js#L39-50 https://github.com/benpickles/peity/blob/master/jquery.peity... I think I got the technique from here - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and http://joubert.posterous.com/crisp-html-5-canvas-text-on-mob...

pyre 14y ago

In the "Events" section, changing the value to 5/5 results in an empty pie chart, rather than a full one. 0-4 out of 5 all work correctly. Edit: The violet 16px 7/7 example in the "Tips" section on the page is also missing. Browser: Chromium 18.0.1025.151 (Developer Build 130497 Linux) Ubuntu 11.04

reustle 14y ago
Works fine for me (Chrome)
keithpeter 14y ago
Works as expected (full pie) on Firefox 13/Ubuntu
- Craiggybear 14y ago
  Yes. Same on OS X and Firefox 13.
pvidler 14y ago
Also works fine on mobile safari (iPad).

rorrr 14y ago

Since you only support IE9+, I don't see how any serious project would pick your charts. IE8 is still #3 most common browser version in the world. IE7 is #5. http://gs.statcounter.com/#browser_version-ww-monthly-201105-201205 http://gs.statcounter.com/#browser_version-ww-monthly-201105...

tosh 14y ago
we have sub 3% IE usage at https://www.blossom.io https://www.blossom.io and most of them (56% use IE 9) so it depends on your target audience I guess :)
- jaredonline 14y ago
  Is the lorem ipsum on your homepage on purpose?
heretohelp 14y ago
You'd be surprised how many serious projects aren't all that interested in IE7 and 8 users. Edit: I work for a funded startup. Let me give you some numbers: 3-5% IE users, a fraction of those using <9. Demographically, very few/if any of those are our customers. Disproportionate effort for very little benefit to our users who care about our product.
postfuturist 14y ago
A significant fraction of our users are on IE 7 and 8. We use this for charts, they look great on IE: http://g.raphaeljs.com/ http://g.raphaeljs.com/
antimora 14y ago
There is a flash based implementation of the canvas that could be used in place of missing element. It only requires a simple drop in code. http://flashcanvas.net/ http://flashcanvas.net/
- benpickles 14y ago
  Thanks, hadn't heard of that one.

pvidler 14y ago

Very interesting, but most of these examples look like they would be fairly nonsensical to someone without JavaScript enabled (especially the line chart). To say nothing of those who use screen readers. Is there a handy way of providing some more meaningful 'alt' text? Perhaps just ignore text in the element? (I didn't check -- you may already be doing this, but I didn't see it mentioned).

1monthlater 14y ago
Who isn't using javascript?
- pvidler 14y ago
  People who keep it disabled on all but a few white-listed sites.

alinajaf 14y ago

Woohoo, Hi Ben!

sakthivelila 14y ago

i need some hacking tool

deleted 14y ago

[deleted]

gfodor 14y ago

The combination of sparklines and pie charts may just cause Tufte's head to explode.

ema 14y ago
Just because Tufte has taste doesn't mean he can't deal with ugliness.

SCdF 14y ago

"Peity (sounds like deity)" As someone who pronounces deity day-a-tee, I'm guessing you actually mean pee-a-tee and not pay-a-tee.

cbsmith 14y ago
Yeah, I was hung up on that as well. Obviously no reflection on the product/code/whatever, but when you go with "sounds like", try to pick a word that can only be pronounced one possible way.
StavrosK 14y ago
Why not just call it Piety?
- benpickles 14y ago
  Yes I wish I'd done that 2 1/2 years ago!
  - StavrosK 14y ago
    Me too :-P
- jawr 14y ago
  Skimming over the front page, I read it as petite.
benpickles 14y ago
Day-a-tee sounds about right - but I'm not precious. It was a deliberate miss-spelling of "pie" with some other letters added on... and quite possibly a mistake.

mseebach 14y ago

I used these in a small mockup app a little while ago. I'm aware of their inappropriateness for representing data, but for adding quick color, pop and smartness to a prototype, they performed beautifully.

tcdent 14y ago

Defining colors with the non-W3C-defined term 'colour' is cute, but annoyingly inconsistent with browser terminology.

allolex 14y ago
Reminds me of my .tmux.conf
benpickles 14y ago
Just because it's a standard doesn't mean it's spelt correctly ;) HTTP referer [sic] comes to mind http://en.wikipedia.org/wiki/HTTP_referer http://en.wikipedia.org/wiki/HTTP_referer

camtarn 14y ago

The 'delimeter' param is misspelled... should be 'delimiter'.

reustle 14y ago
Not my project, but you can open an issue or pull request :) https://github.com/benpickles/peity https://github.com/benpickles/peity

kmfrk 14y ago

This looks better than anything else I have seen in graph tools. Shame about the lack of fall-back options, though. What does it look like, if a browser doesn't support the graphs? Do they just disappear?

BCM43 14y ago
I was running without javascript, and was confused for a second when there were no example graphs.

oakwhiz 14y ago

This goes great with the HTML5 <meter> tag.