Show HN: Easy SVG charts for your static site, no JavaScript

[hughes]

"no Javascript" is very misleading. There are several <script> tags embedded in each svg, including at least two scripts that are loaded from external sources.

In fact, nearly 1/3 of the data transferred for the first graph is javascript[0].

https://gist.github.com/hughes/c876b02aa06f897c99e2

[Kiro]

Hm, how does this work? How can JavaScript be executed like that when it's included as an image?

[elwell]

Is that just for fallback and also tooltips?

[ChuckMcM]

Nice, but its a re-implementation of the Google Chartserver right? (same model, URL describes charts which are returned)

The issues Google ran into were as it gets popular you need a more server horse power, and the work of keeping things secure is pretty high.

That said I always enjoyed using chartserver :-) so I presume I would enjoy using this. But what I'd really like is a package for python or perl I could load up behind an nginx instance and make this a local feature.

[nappy-doo]

I work for the team that maintains Chartserver. It's being deprecated for a number of reasons, none of which you've listed. Mostly, we feel the service has been replaced by JS charting solutions (Google Charts, d3, etc.) which are more flexible and don't have the privacy concerns of Chartserver. Most importantly, the team that developed it has moved on to other work and it hasn't been restaffed.

We revisit the deprecation of Chartserver every couple of months (I believe it's had two stays of execution), so there might be some life left in that old code.

[Zikes]

I don't think Google Chartserver offered SVG, though, did it?

I think that's a significant difference, in that the <object> variant of this API has the potential for access to the chart elements for styling and interactivity.

[h4pless]

Not to nitpick or anything, but the first example on the site shows a bar chart with the example code being:

<img src="//api.chartspree.com/bar.svg?Foo=1,1,2,3,5">

However the actual embedded code for the example and the resultant chart is:

<img src="//api.chartspree.com/bar.svg?Foo=1,1,2,3,6">

My immediate reaction to seeing the wrong chart being displayed for some example code was that your system just didn't work properly.

As this is the first thing anyone sees when visiting the project, it might be a good thing to change.

[bichiliad]

One small thing is that the responses aren't consistent.

For example, sometimes this is funny, and sometimes it isn't, depending on which label is assigned to which color (seemingly random).

http://api.chartspree.com/pie.svg?Crips=35&Bloods=20

[MattBearman]

I agree it's odd that the order isn't consistent, but I don't get the joke which ever way it is, what am I missing?

[kaishiro]

Man, this brace.io gang is really making me happy. First formspree, now this. Making Middleman (et al.) sexy.

Edit: I guess Middleman isn't the only SSG :)

[salmiak]

Nice! We just built a feature in our app using the deprecated chart service that Google offers. This looks like a much nicer implementation. But I lack a few things. Here are som ideas for improvement:

- Let me choose the colors

- Let me add or remove bullets on the line charts

- Let me control the axes

- Let me add a grid

Love it! Keep it up.

[igotwater]

+1, Great idea and execution. Wondering, do these charts work well when used in emails?

[news_to_me]

Oh cool, I'll just send you all my data in the url params.

[appleflaxen]

The first image on the page shows a series of data 1,1,2,3,5

but the chart shows the last bar going to six.

The URL makes it apparent that it's just a typo, but it's the literally the first thing on the page :)

http://api.chartspree.com/bar.svg?Foo=1,1,2,3,6&_height=250p...

[shortformblog]

This is a good idea. One thought for the team as you're building this: Is it possible to make an alternative version of the link that loads up the same graphic in JPG format?

I could see this going viral on sites like Pinterest or Tumblr, but I found that when I added this into Tumblr, it wouldn't save the post.

[capkutay]

Has anyone looked at SVG frameworks like snapsvg[0]? After using d3.js for awhile, I like the idea of doing something more low level in terms of rendering and interacting with svgs.

0: http://snapsvg.io/

[Kronopath]

I used Snap for an animation on my homepage[0], though that was a relatively simple thing. My impressions of it were generally good, although there was a bug or two with version 0.1 that I was using that caused issues in some browsers, requiring me to move to the dev branch. I see they've released 0.2 now, which should have the fixes.

[0] http://kronopath.net/

[fiatjaf]

The best tool I've ever seen. Thanks for providing this.

[ChrisArchitect]

always on the look out for a replacement for google image charts api..... which remains super useful as long they continue to support it past EOL hehe

[nroose]

Why does it look like 5 = 6?

[olavgg]

Didn't knew about pygal, what a fantastic chart framework.

[Eleutheria]

Easy is my middle name.

I like it.