3 ms·

Show HN: RESTCharts – Generate charts quickly and easily through a REST-like API

35 points by whatl3y 9y ago

o1lab 9y ago
This is neat. Was looking for something like this for Xmysql[1] - which has a CHART API to fetch 'numeric column distribution' in MySql table. The data from Xmysql-chart-api[2] can then be fed to this. Will give it a try over weekend. [1] : https://github.com/o1lab/xmysql https://github.com/o1lab/xmysql [2] : https://github.com/o1lab/xmysql#chart https://github.com/o1lab/xmysql#chart
ollyfg 9y ago
Looks good! One feature that would definitely get me using this for personal projects is the ability to add/customise axis. You might already have this, but I didn't see it in any of your examples, so if this is present, please advertise it! My general reaction when seeing a chart without axis is "pretty, but I can't see what it means", where as with decent labelled axis I can dig into it and look at data points, and come to my own conclusions about the data. Still, this is a useful service that could make life much easier - keep at it!
- whatl3y 9y ago
  EDIT: HN is doing some escaping to my example URL, so I adjusted it a little below. Author here, thanks for the feedback! My default use case was to use these images as background-images (via CSS) in dashboard widgets that show an accurate trend for how data has changed over time. Therefore my defaults were to hide to x and y-axis and make the chart margin 0 to fit in the widget and look "nice" across the entire thing. But if you are or become familiar with the Highcharts chart config options, you can update any option you want for the axis via the `raw` param (see more detailed info on the params in github: https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts). One thing you could do to one of the simple charts provided on the landing page to show the axes is override the default margin values (which is margin: [0, 0, 0, 0]) and make the x-axis and y-axis visible like so: where [raw]={"xAxis":{"visible":true},"yAxis":{"visible":true},"chart":{"margin":null}} your URL would become https://localhost/chart/line?data=5,1,2,9,8,3,0,0,4&raw=[raw] https://localhost/chart/line?data=5,1,2,9,8,3,0,0,4&raw=[raw... You can obviously continue to add config to adjust the language on the axes among other things. I realize this could get a little verbose quick, but again the idea was to make a simple, quick view of data, even though you could technically get as complicated as you want with the `raw` param.
- whatl3y 9y ago
  Update: You can now see examples with axes shown in the Advanced Section: https://www.restcharts.com/#Advanced%20Configuration https://www.restcharts.com/#Advanced%20Configuration
zaszrespawned 9y ago
Will this work in emails? If I put this URL in img tag in a html email, the clients and browsers (if they are configured to allow external images) will this show up?
- whatl3y 9y ago
  Great question, and the answer is yes it will (this is one of the most useful features I feel). I encourage you to try and test an image with your email :). The chart endpoint responds with a raw PNG buffer and a Content-type header of image/png, so it would act just the same as if it were a static asset image in a public folder or CDN.
fiatjaf 9y ago
What about the old http://chartspree.io/ http://chartspree.io/?
- nautical 9y ago
  I tried chartspree, none of the examples are working on the website.
eb0la 9y ago
An interesting addition could be a semicircle pie chart. It's very common to see them in dashboards and in the news when reporting election results. Making them look ok in {qlikview,tableau,etc} it's a bit time consuming.
- whatl3y 9y ago
  Thanks for the feedback! You can use `raw` parameter to configure any type of Highcharts chart you want (review GH for more info: https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts). It looks like Highcharts already supports a semicircle donut, so you could take the entire config object, `encodeURI(JSON.parse([config]))` it, and add it to the &raw= parameter to draw a semi-circle donut: https://www.highcharts.com/demo/pie-semi-circle https://www.highcharts.com/demo/pie-semi-circle A working use-case within RESTCharts is as follows (shortened with google so the link doesn't break): http://goo.gl/NbJtqX http://goo.gl/NbJtqX

35 points by whatl3y 9y ago

This is neat. Was looking for something like this for Xmysql[1] - which has a CHART API to fetch 'numeric column distribution' in MySql table. The data from Xmysql-chart-api[2] can then be fed to this. Will give it a try over weekend. [1] : https://github.com/o1lab/xmysql https://github.com/o1lab/xmysql [2] : https://github.com/o1lab/xmysql#chart https://github.com/o1lab/xmysql#chart

ollyfg 9y ago

Looks good! One feature that would definitely get me using this for personal projects is the ability to add/customise axis. You might already have this, but I didn't see it in any of your examples, so if this is present, please advertise it! My general reaction when seeing a chart without axis is "pretty, but I can't see what it means", where as with decent labelled axis I can dig into it and look at data points, and come to my own conclusions about the data. Still, this is a useful service that could make life much easier - keep at it!

whatl3y 9y ago
EDIT: HN is doing some escaping to my example URL, so I adjusted it a little below. Author here, thanks for the feedback! My default use case was to use these images as background-images (via CSS) in dashboard widgets that show an accurate trend for how data has changed over time. Therefore my defaults were to hide to x and y-axis and make the chart margin 0 to fit in the widget and look "nice" across the entire thing. But if you are or become familiar with the Highcharts chart config options, you can update any option you want for the axis via the `raw` param (see more detailed info on the params in github: https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts). One thing you could do to one of the simple charts provided on the landing page to show the axes is override the default margin values (which is margin: [0, 0, 0, 0]) and make the x-axis and y-axis visible like so: where [raw]={"xAxis":{"visible":true},"yAxis":{"visible":true},"chart":{"margin":null}} your URL would become https://localhost/chart/line?data=5,1,2,9,8,3,0,0,4&raw=[raw] https://localhost/chart/line?data=5,1,2,9,8,3,0,0,4&raw=[raw... You can obviously continue to add config to adjust the language on the axes among other things. I realize this could get a little verbose quick, but again the idea was to make a simple, quick view of data, even though you could technically get as complicated as you want with the `raw` param.
whatl3y 9y ago
Update: You can now see examples with axes shown in the Advanced Section: https://www.restcharts.com/#Advanced%20Configuration https://www.restcharts.com/#Advanced%20Configuration

zaszrespawned 9y ago

Will this work in emails? If I put this URL in img tag in a html email, the clients and browsers (if they are configured to allow external images) will this show up?

whatl3y 9y ago
Great question, and the answer is yes it will (this is one of the most useful features I feel). I encourage you to try and test an image with your email :). The chart endpoint responds with a raw PNG buffer and a Content-type header of image/png, so it would act just the same as if it were a static asset image in a public folder or CDN.

fiatjaf 9y ago

What about the old http://chartspree.io/ http://chartspree.io/?

nautical 9y ago
I tried chartspree, none of the examples are working on the website.

eb0la 9y ago

An interesting addition could be a semicircle pie chart. It's very common to see them in dashboards and in the news when reporting election results. Making them look ok in {qlikview,tableau,etc} it's a bit time consuming.

whatl3y 9y ago
Thanks for the feedback! You can use `raw` parameter to configure any type of Highcharts chart you want (review GH for more info: https://github.com/whatl3y/restcharts https://github.com/whatl3y/restcharts). It looks like Highcharts already supports a semicircle donut, so you could take the entire config object, `encodeURI(JSON.parse([config]))` it, and add it to the &raw= parameter to draw a semi-circle donut: https://www.highcharts.com/demo/pie-semi-circle https://www.highcharts.com/demo/pie-semi-circle A working use-case within RESTCharts is as follows (shortened with google so the link doesn't break): http://goo.gl/NbJtqX http://goo.gl/NbJtqX