
Show HN: Create Chart Images from a URL - typpo
https://quickchart.io/
======
typpo
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/rZt...](https://groups.google.com/forum/#!topic/google-chart-
api/rZtHTyYgyXI)

~~~
M4v3R
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
Indeed, I am upgrading it to a larger machine.

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

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

------
jedberg
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
TIL too, but I'm honestly not surprised.

------
mherrmann
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
agreed. 100%

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

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

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

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

~~~
typpo
The API does support "width" and "height" query parameters to set image size!

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

------
joering2
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
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-
maxim...](https://stackoverflow.com/questions/417142/what-is-the-maximum-
length-of-a-url-in-different-browsers)

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

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

------
fiatjaf
Reminds me of the late Chartspree[0].

[0]:
[http://web.archive.org/web/20170201170400/http://chartspree....](http://web.archive.org/web/20170201170400/http://chartspree.io/)

------
huntermeyer
[https://www.image-charts.com](https://www.image-charts.com) is a drop-in
replacement for Google Image Charts.

~~~
EForEndeavour
Well, except for the watermark on all free-tier images.

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

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

------
FabioFleitas
How do you compare to ChartURL ([https://charturl.com](https://charturl.com))?

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

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

