Peity - Little charts for little projects | Hacker News Reader

Peity - Little charts for little projects

benpickles.github.com

265 pointsreustle47 comments

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

Just because Tufte has taste doesn't mean he can't deal with ugliness.

"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.

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.

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.

Why not just call it Piety?

Yes I wish I'd done that 2 1/2 years ago!

Me too :-P

Skimming over the front page, I read it as petite.

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

So let's say I don't care about compatibility, what is the real differences between Peity and jQuery sparklines?

Size would be one, Peity is 5k uncompressed, sparklines is 119k - big difference there.

The new version of sparklines is interactive. I could be 100% wrong, but on quick inspection Piety has less functionality and less compatibility.

Never knew about Sparkline...cool. Now that I've seen it, I second your question.

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

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

Reminds me of my .tmux.conf

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).

Who isn't using javascript?

People who keep it disabled on all but a few white-listed sites.

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

Works as expected (full pie) on Firefox 13/Ubuntu

Also works fine on mobile safari (iPad).

Works fine for me (Chrome)

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?

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

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.

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

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

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!

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

Actually it took a little work to get things crisp on retina displays - 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-mob...

Simple hacks are the best hacks.

This goes great with the HTML5 <meter> tag.

Not bad. Resembles sparkline.

Cool Sparklines and more!

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...

I tried adding a hook for ExplorerCanvas - http://excanvas.sourceforge.net/ - a while back but got inconsistent results - https://github.com/benpickles/peity/issues/7#issuecomment-27...

Just checked my analytics out of interest. Sample of 200k unique visitors to a non-tech related website, 6.7% IE8 or less. I would certainly consider using this tool even without knowing about the flash shim, especially for something that something is probably an eye-candy extra and not the central feature of a statistical page.

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/

Thanks, hadn't heard of that one.

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/

we have sub 3% IE usage at https://www.blossom.io and most of them (56% use IE 9) so it depends on your target audience I guess :)

Is the lorem ipsum on your homepage on purpose?

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.

Woohoo, Hi Ben!

i need some hacking tool

Reply on news.ycombinator.com