6 ms·

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

129 points by colevscode 13y ago

Eleutheria 13y ago
Easy is my middle name. I like it.
capkutay 13y ago
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 13y ago
  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/
ChuckMcM 13y ago
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.
- Zikes 13y ago
  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.
  - deleted 13y ago
    [deleted]
  - rplnt 13y ago
    But that way you are throwing away the only benefit - that it works without javascript. It's really expensive to draw graphs and it's better to be offloaded to clients. I can't think of many reasons for building them serverwise.. except for when you don't have access to javascript or you are limited by the power as well.
    - Zikes 13y ago
      I disagree, as even if you did use Javascript the service is still far more accessible to a novice developer than something like the d3.js library (which I love, but has a rather steep learning curve). Additionally, you would be surprised at how much could be accomplished in that department with just CSS.
      - icebraining 13y ago
        That's a limitation of d3.js, not JavaScript. gRaphaël is pretty easy to use: http://g.raphaeljs.com/ http://g.raphaeljs.com/
  - ChuckMcM 13y ago
    Well Chartserver did offer SVG at one point, although at the time SVG was (and kinda still is) under supported in the browser space AFAICT. Having recently rediscovered the non-joy of putting somebody else's javascript on a page (in that case WebRing) I am a bit gun shy of the whole model[0]. I really like the idea of 'server driven charts' for easy web pages and illustration. But I would rather have it be something I could put on an Raspberry Pi in my network so that I didn't have to worry either about the privacy issues or it going away (as Chartserver has been trying to do :-). [0] Imagine what will happen if placekitten.com gets sold to some porn aggregator.
    - samdb 13y ago
      That's an interesting comment - we're building a SaaS 'point and click' style D3-based chart designer (http://chartblocks.com http://chartblocks.com) but hadn't really given much thought so far to people that prefer to self host.
- nappy-doo 13y ago
  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.
  - collyw 13y ago
    When is it depreciated exactly. Says 2015, but is that going to be January, or December? (I need to replace them in my app at work).
    - nappy-doo 13y ago
      https://developers.google.com/chart/terms https://developers.google.com/chart/terms Again, Chartserver has had a number of stays of execution. Officially, we're killing it in 2015, but it would surprise me. Usage numbers just haven't been what you would expect from a deprecated product.
  - clukic 13y ago
    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 13y ago
      It's not dead yet.
  - clukic 13y ago
ChrisArchitect 13y ago
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
bichiliad 13y ago
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 13y ago
  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 13y ago
    The color of each gang is quite important.
hughes 13y ago
"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 13y ago
  Hm, how does this work? How can JavaScript be executed like that when it's included as an image?
  - btcfn 13y ago
    http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#J...
  - dpweb 13y ago
    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 13y ago
      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/script https://developer.mozilla.org/en-US/docs/Web/SVG/Element/scr...
      - spb 13y ago
        As images / targets, SVG documents have their own global scope, much like a page in an iframe.
- deleted 13y ago
  [deleted]
h4pless 13y ago
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.
news_to_me 13y ago
Oh cool, I'll just send you all my data in the url params.
olavgg 13y ago
Didn't knew about pygal, what a fantastic chart framework.
salmiak 13y ago
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 13y ago
+1, Great idea and execution. Wondering, do these charts work well when used in emails?
kaishiro 13y ago
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 :)
shortformblog 13y ago
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.
fiatjaf 13y ago
The best tool I've ever seen. Thanks for providing this.
nroose 13y ago
Why does it look like 5 = 6?
appleflaxen 13y ago
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=250px http://api.chartspree.com/bar.svg?Foo=1,1,2,3,6&_height=250p...

129 points by colevscode 13y ago

Easy is my middle name. I like it.

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 13y ago
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/

ChuckMcM 13y ago

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.

Zikes 13y ago
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.
- deleted 13y ago
  [deleted]
- rplnt 13y ago
  But that way you are throwing away the only benefit - that it works without javascript. It's really expensive to draw graphs and it's better to be offloaded to clients. I can't think of many reasons for building them serverwise.. except for when you don't have access to javascript or you are limited by the power as well.
  - Zikes 13y ago
    I disagree, as even if you did use Javascript the service is still far more accessible to a novice developer than something like the d3.js library (which I love, but has a rather steep learning curve). Additionally, you would be surprised at how much could be accomplished in that department with just CSS.
    - icebraining 13y ago
      That's a limitation of d3.js, not JavaScript. gRaphaël is pretty easy to use: http://g.raphaeljs.com/ http://g.raphaeljs.com/
- ChuckMcM 13y ago
  Well Chartserver did offer SVG at one point, although at the time SVG was (and kinda still is) under supported in the browser space AFAICT. Having recently rediscovered the non-joy of putting somebody else's javascript on a page (in that case WebRing) I am a bit gun shy of the whole model[0]. I really like the idea of 'server driven charts' for easy web pages and illustration. But I would rather have it be something I could put on an Raspberry Pi in my network so that I didn't have to worry either about the privacy issues or it going away (as Chartserver has been trying to do :-). [0] Imagine what will happen if placekitten.com gets sold to some porn aggregator.
  - samdb 13y ago
    That's an interesting comment - we're building a SaaS 'point and click' style D3-based chart designer (http://chartblocks.com http://chartblocks.com) but hadn't really given much thought so far to people that prefer to self host.
nappy-doo 13y ago
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.
- collyw 13y ago
  When is it depreciated exactly. Says 2015, but is that going to be January, or December? (I need to replace them in my app at work).
  - nappy-doo 13y ago
    https://developers.google.com/chart/terms https://developers.google.com/chart/terms Again, Chartserver has had a number of stays of execution. Officially, we're killing it in 2015, but it would surprise me. Usage numbers just haven't been what you would expect from a deprecated product.
- clukic 13y ago
  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 13y ago
    It's not dead yet.
- clukic 13y ago

ChrisArchitect 13y ago

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

bichiliad 13y ago

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 13y ago
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 13y ago
  The color of each gang is quite important.

hughes 13y ago

"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 13y ago
Hm, how does this work? How can JavaScript be executed like that when it's included as an image?
- btcfn 13y ago
  http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#J...
- dpweb 13y ago
  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 13y ago
    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/script https://developer.mozilla.org/en-US/docs/Web/SVG/Element/scr...
    - spb 13y ago
      As images / targets, SVG documents have their own global scope, much like a page in an iframe.
deleted 13y ago
[deleted]

h4pless 13y ago

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.

news_to_me 13y ago

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

olavgg 13y ago

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

salmiak 13y ago

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 13y ago

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

kaishiro 13y ago

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

shortformblog 13y ago

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.

fiatjaf 13y ago

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

nroose 13y ago

Why does it look like 5 = 6?

appleflaxen 13y ago

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