Show HN: Create Chart Images from a URL | Hacker News Reader

Show HN: Create Chart Images from a URL

quickchart.io

204 pointstyppo35 comments

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

I welcome your thoughts and feedback.

[1]: https://groups.google.com/forum/#!topic/google-chart-api/rZt...

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

How to use it:

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?

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.

Indeed, I am upgrading it to a larger machine.

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)

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://github.com/whatl3y/restcharts

A competitor that appears to be profitable and doing well is https://charturl.com/.

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!

TIL too, but I'm honestly not surprised.

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.

agreed. 100%

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

I’d recommend taking a look at 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

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

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.

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

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

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

Or generate an svg version of the chart!

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 ?

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

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.

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.

... and proxies

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.

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.

Reminds me of the late Chartspree[0].

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

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

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

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.

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.

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

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.