7 ms·

Show HN: Create Chart Images from a URL

204 points by typpo 8y ago

typpo 8y ago
With the Google Image Charts API shutting down [1], I set out to build a replacement service that allows developers to create PNG images by encoding chart data and other options in a single URL. Some might prefer an interactive Javascript charting library, but this is not possible in the case of email, SMS, Slack, and so on. This image generation solution is simpler and does not require external dependencies. This project is open source and is pretty easy to run if you do not want to rely on the QuickChart.io web service: https://github.com/typpo/quickchart https://github.com/typpo/quickchart I welcome your thoughts and feedback. [1]: https://groups.google.com/forum/#!topic/google-chart-api/rZtHTyYgyXI https://groups.google.com/forum/#!topic/google-chart-api/rZt...
- M4v3R 8y ago
  That's a neat idea and nice of you to have made it open source, since the quickchart.io site seems to be down at the moment.
  - typpo 8y ago
    Indeed, I am upgrading it to a larger machine.
- fit2rule 8y ago
  Thanks for this - its an awesome service. I was just wondering if you'd seen FF Chartwell? Its a font that allows the creation of these kinds of charts, albeit it uses typographic ligatures to produce the end results .. https://www.fontshop.com/families/ff-chartwell https://www.fontshop.com/families/ff-chartwell How to use it: https://vimeo.com/41772735 https://vimeo.com/41772735 I've found this to be a brilliant tool for the creation of neat charts in a jiffy - just like quickchart.io, albeit without requiring a network connection. Anyway, thought you might be curious bout Chartwell, in case you hadn't seen it already .. maybe there is some synergy for a new version in the future?
oftenwrong 8y ago
Are the example charts supposed to have red backgrounds? It loads that way on my system in 3 different browsers. edit: It is working fine now. No more red backgrounds.
- typpo 8y ago
  Seems to be a strange issue with transparent images on certain devices. I've corrected this and also added an optional "bkg" param to set the background color.
FabioFleitas 8y ago
How do you compare to ChartURL (https://charturl.com https://charturl.com)?
- 52-6F-62 8y ago
  Looks to be completely free.
- typpo 8y ago
  It's free, open source, and no watermark - so QuickChart compares favorably in that regard! In terms of functionality, ChartURL is also built on Chart.js, so charting capabilities should be roughly equivalent. They've added the nice feature of being able to save your charts to a short URL.
- fiatjaf 8y ago
  You don't have to login. Just added it to https://github.com/fiatjaf/awesome-loginless https://github.com/fiatjaf/awesome-loginless
joering2 8y ago
Great stuff and free :) question - you don't need to urlencode the paramteres in the URL? how so? Further - isnt that limited to 1024 chars per URI specs ?
- typpo 8y ago
  You probably should urlencode the parameters for longer URLs and chart definitions containing special characters. For simpler examples we can get away without URL encoding. The server is configured to accept up to ~64kb URLs. Some browsers have built-in limitations that range from 5120 characters (IE 11) to 64k [1]. Of course, a URL that large becomes very unwieldy. Maybe I should add a way to save charts to a short url. [1] https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers https://stackoverflow.com/questions/417142/what-is-the-maxim...
  - koolba 8y ago
    Could also add gzip/deflate/base64 of the query parameter. For many JSON payloads the compression ratio can be 10:1. If it’s all happening client side then the processing cost is pushed to the browser so an added decompress wouldn’t change much.
- aeorgnoieang 8y ago
  It seems like you would need to encode the parameter value; and in the same way as anything else. There isn't a limit of URI length per the relevant 'specs'. There are generally limits imposed by _browsers_, and probably web servers too tho.
  - duncans 8y ago
    ... and proxies
arielm 8y ago
Looks great. There have been a few projects like this that I’ve seen but yours has a good amount of flexibility. Do you intend to monetize this somehow? I imagine that throwing a few million daily requests on something that renders images (fast) isn’t exactly free to host...
ggm 8y ago
google visualisation api remains. its in-browser .js, heavier weight, but it works. So this is a replacement for throwing data at a central chart render engine, not a replacement for all current google charting methods. (disclaimer: I've built sites which depend on the google chart & visualisation api) This replaces the deprecated image chart methods.
mherrmann 8y ago
Looks great :-) You should charge for it. Maybe even in the interest of your users, to keep the service alive. You could leave it open source so people can self-host, or use your server for a fee for convenience.
- masukomi 8y ago
  agreed. 100%
whatl3y 8y ago
Nice! I built the following a year or two ago and it's currently running on AWS Lambda. It uses Highcharts to generate charts. https://api.restcharts.com/ https://api.restcharts.com/ https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts A competitor that appears to be profitable and doing well is https://charturl.com/ https://charturl.com/.
jkaptur 8y ago
This is so cool. I just tested using it with the IMAGE formula in Google Sheets and it works really well: =IMAGE("https://quickchart.io/chart?c=" & ENCODEURL("{type:'radar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}"), 1)
andrethegiant 8y ago
Cool! You should multiply the width and height of each chart on your marketing site by `window.devicePixelRatio` so that the graphs look crisp on Retina/HiDPI displays.
- nsedlet 8y ago
  It looks like the charts default to 500x300. It would be nice to be able to pass a parameter specifying the size of the image returned. Then I could set the width of the <img/> to be half of that to get it to show properly on retina at an arbitrary size
  - chii 8y ago
    Or generate an svg version of the chart!
  - typpo 8y ago
    The API does support "width" and "height" query parameters to set image size!
    - nsedlet 8y ago
      Ah, I'm wrong, sorry. I'd been inspecting the image elements to see why they were fuzzy on my retina screen, and didn't see those params - it's in the docs right there on the page though. In that case I'd just update the marketing site to fetch larger images so they look good on retina. This is a fantastic project, by the way. The need for this comes up all the time for us (e.g. charts for emails).
fiatjaf 8y ago
Reminds me of the late Chartspree[0]. [0]: http://web.archive.org/web/20170201170400/http://chartspree.io/ http://web.archive.org/web/20170201170400/http://chartspree....
jedberg 8y ago
TIL that Google Charts is shutting down. My first thought after seeing this was "how is this different than Google Charts?". Then I got to the bottom about GC shutting down. I didn't use GC very much, but when I needed a quick chart it was super handy. Thanks for making this!
- Ayesh 8y ago
  TIL too, but I'm honestly not surprised.
seanlaff 8y ago
I’d recommend taking a look at Vega https://vega.github.io/vega/ https://vega.github.io/vega/ or its sibling Vega-lite. It exposes all of its configuration via declarative JSON. I could see it working well for a use case like this
paulrosenzweig 8y ago
Great app! Here's a similar tool that I've seen, but haven't used: http://chartd.co http://chartd.co
max23_ 8y ago
I never thought of using any service to generate a chart and this looks like it may come in handy in the future for me. Glad that it is open source so people can self host it.
deleted 8y ago
[deleted]
huntermeyer 8y ago
https://www.image-charts.com https://www.image-charts.com is a drop-in replacement for Google Image Charts.
- EForEndeavour 8y ago
  Well, except for the watermark on all free-tier images.
masha_sb 8y ago
Neat Stuff! What is the max data that I can send it?

204 points by typpo 8y ago

With the Google Image Charts API shutting down [1], I set out to build a replacement service that allows developers to create PNG images by encoding chart data and other options in a single URL. Some might prefer an interactive Javascript charting library, but this is not possible in the case of email, SMS, Slack, and so on. This image generation solution is simpler and does not require external dependencies. This project is open source and is pretty easy to run if you do not want to rely on the QuickChart.io web service: https://github.com/typpo/quickchart https://github.com/typpo/quickchart I welcome your thoughts and feedback. [1]: https://groups.google.com/forum/#!topic/google-chart-api/rZtHTyYgyXI https://groups.google.com/forum/#!topic/google-chart-api/rZt...

M4v3R 8y ago
That's a neat idea and nice of you to have made it open source, since the quickchart.io site seems to be down at the moment.
- typpo 8y ago
  Indeed, I am upgrading it to a larger machine.
fit2rule 8y ago
Thanks for this - its an awesome service. I was just wondering if you'd seen FF Chartwell? Its a font that allows the creation of these kinds of charts, albeit it uses typographic ligatures to produce the end results .. https://www.fontshop.com/families/ff-chartwell https://www.fontshop.com/families/ff-chartwell How to use it: https://vimeo.com/41772735 https://vimeo.com/41772735 I've found this to be a brilliant tool for the creation of neat charts in a jiffy - just like quickchart.io, albeit without requiring a network connection. Anyway, thought you might be curious bout Chartwell, in case you hadn't seen it already .. maybe there is some synergy for a new version in the future?

oftenwrong 8y ago

Are the example charts supposed to have red backgrounds? It loads that way on my system in 3 different browsers. edit: It is working fine now. No more red backgrounds.

typpo 8y ago
Seems to be a strange issue with transparent images on certain devices. I've corrected this and also added an optional "bkg" param to set the background color.

FabioFleitas 8y ago

How do you compare to ChartURL (https://charturl.com https://charturl.com)?

52-6F-62 8y ago
Looks to be completely free.
typpo 8y ago
It's free, open source, and no watermark - so QuickChart compares favorably in that regard! In terms of functionality, ChartURL is also built on Chart.js, so charting capabilities should be roughly equivalent. They've added the nice feature of being able to save your charts to a short URL.
fiatjaf 8y ago
You don't have to login. Just added it to https://github.com/fiatjaf/awesome-loginless https://github.com/fiatjaf/awesome-loginless

joering2 8y ago

Great stuff and free :) question - you don't need to urlencode the paramteres in the URL? how so? Further - isnt that limited to 1024 chars per URI specs ?

typpo 8y ago
You probably should urlencode the parameters for longer URLs and chart definitions containing special characters. For simpler examples we can get away without URL encoding. The server is configured to accept up to ~64kb URLs. Some browsers have built-in limitations that range from 5120 characters (IE 11) to 64k [1]. Of course, a URL that large becomes very unwieldy. Maybe I should add a way to save charts to a short url. [1] https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers https://stackoverflow.com/questions/417142/what-is-the-maxim...
- koolba 8y ago
  Could also add gzip/deflate/base64 of the query parameter. For many JSON payloads the compression ratio can be 10:1. If it’s all happening client side then the processing cost is pushed to the browser so an added decompress wouldn’t change much.
aeorgnoieang 8y ago
It seems like you would need to encode the parameter value; and in the same way as anything else. There isn't a limit of URI length per the relevant 'specs'. There are generally limits imposed by _browsers_, and probably web servers too tho.
- duncans 8y ago
  ... and proxies

arielm 8y ago

Looks great. There have been a few projects like this that I’ve seen but yours has a good amount of flexibility. Do you intend to monetize this somehow? I imagine that throwing a few million daily requests on something that renders images (fast) isn’t exactly free to host...

ggm 8y ago

google visualisation api remains. its in-browser .js, heavier weight, but it works. So this is a replacement for throwing data at a central chart render engine, not a replacement for all current google charting methods. (disclaimer: I've built sites which depend on the google chart & visualisation api) This replaces the deprecated image chart methods.

mherrmann 8y ago

Looks great :-) You should charge for it. Maybe even in the interest of your users, to keep the service alive. You could leave it open source so people can self-host, or use your server for a fee for convenience.

masukomi 8y ago
agreed. 100%

whatl3y 8y ago

Nice! I built the following a year or two ago and it's currently running on AWS Lambda. It uses Highcharts to generate charts. https://api.restcharts.com/ https://api.restcharts.com/ https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts A competitor that appears to be profitable and doing well is https://charturl.com/ https://charturl.com/.

jkaptur 8y ago

This is so cool. I just tested using it with the IMAGE formula in Google Sheets and it works really well: =IMAGE("https://quickchart.io/chart?c=" & ENCODEURL("{type:'radar',data:{labels:['January','February','March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}"), 1)

andrethegiant 8y ago

Cool! You should multiply the width and height of each chart on your marketing site by `window.devicePixelRatio` so that the graphs look crisp on Retina/HiDPI displays.

nsedlet 8y ago
It looks like the charts default to 500x300. It would be nice to be able to pass a parameter specifying the size of the image returned. Then I could set the width of the <img/> to be half of that to get it to show properly on retina at an arbitrary size
- chii 8y ago
  Or generate an svg version of the chart!
- typpo 8y ago
  The API does support "width" and "height" query parameters to set image size!
  - nsedlet 8y ago
    Ah, I'm wrong, sorry. I'd been inspecting the image elements to see why they were fuzzy on my retina screen, and didn't see those params - it's in the docs right there on the page though. In that case I'd just update the marketing site to fetch larger images so they look good on retina. This is a fantastic project, by the way. The need for this comes up all the time for us (e.g. charts for emails).

fiatjaf 8y ago

Reminds me of the late Chartspree[0]. [0]: http://web.archive.org/web/20170201170400/http://chartspree.io/ http://web.archive.org/web/20170201170400/http://chartspree....

jedberg 8y ago

TIL that Google Charts is shutting down. My first thought after seeing this was "how is this different than Google Charts?". Then I got to the bottom about GC shutting down. I didn't use GC very much, but when I needed a quick chart it was super handy. Thanks for making this!

Ayesh 8y ago
TIL too, but I'm honestly not surprised.

seanlaff 8y ago

I’d recommend taking a look at Vega https://vega.github.io/vega/ https://vega.github.io/vega/ or its sibling Vega-lite. It exposes all of its configuration via declarative JSON. I could see it working well for a use case like this

paulrosenzweig 8y ago

Great app! Here's a similar tool that I've seen, but haven't used: http://chartd.co http://chartd.co

max23_ 8y ago

I never thought of using any service to generate a chart and this looks like it may come in handy in the future for me. Glad that it is open source so people can self host it.

deleted 8y ago

[deleted]

huntermeyer 8y ago

https://www.image-charts.com https://www.image-charts.com is a drop-in replacement for Google Image Charts.

EForEndeavour 8y ago
Well, except for the watermark on all free-tier images.

masha_sb 8y ago

Neat Stuff! What is the max data that I can send it?