
Show HN: Easy SVG charts for your static site, no JavaScript - colevscode
http://www.chartspree.com/
======
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](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?

~~~
dpweb
Curious about that too. If I load an svg in the address bar with embedded
script I can show alert(), but linked into html using <img> tag, alert does
not run. Sandboxed? Otherwise I could execute JS just by loading in using svg
via <img>.

~~~
hughes
Looks like it's not sandboxed at all?

> Any functions defined within any script element have a global scope across
> the entire current document.

[0] [https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/scr...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/script)

~~~
spb
As images / targets, SVG documents have their own global scope, much like a
page in an iframe.

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

~~~
clukic
I've done a ton of work with Chartserver, and I'm continually impressed by how
elegant it is in every detail of its implementation. Although, I'm also a huge
fan of D3. Not every chart should be built in JavaScript. I can embed it, I
can drop it in an email, I can serve up 20 charts on a page in milliseconds,
and I can do it equally quickly anywhere in the world.

Services like this, are one of the things that keeps up 'Google's not just in
it for the money' cred, I'm going to be really sorry to see it go.

~~~
nappy-doo
It's not dead yet.

------
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](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?

~~~
JosephBrown
The color of each gang is quite important.

------
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...](http://api.chartspree.com/bar.svg?Foo=1,1,2,3,6&_height=250px)

------
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/](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/](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.

