This API generates images from google charts or for the record any charting library you want. The charts are not interactive. The images generated from the chart can be used to showcase data where a browser is not available. This is particularly useful when generating data for emails, presentations or simply, distributions or even printing. Chart images can be cached to be used over a period of time. This also eliminates the need to load a charting library.
- NodeJS
- PhantomJS binary
First of all download the phantomjs binary and place it at a directory which is accessible to your application. Next setup the server by:
npm install
You can add routes and paths to the server for making various graphs and charts. The data can be fetched for each call using ajax in the headless browser. An example routes /line_chart
has been added for reference.
Simply do node index.js
. This will run the server. There are many ways to run it permanently which will not be discussed here. Simplest is to simply assign it a random domain like chartmaker.yourdomain.com
at nginx
level and keep it alive using forever.
Check the route set in index.js
and the template rendered by it.
You can access your charts by http://chartmaker.yourdomain.com/line_chart
and check the chart.
Now data passing around may seem weird but there are few ways.
- You can pass data in url
http://chartmaker.yourdomain.com/line_chart\?id\=2\&data\=\[12\,4\,6\,8]\&....
and so on. - It would be convenient to just pass an id and fetch rest of the data in the template. Example:
URL - http://chartmaker.yourdomain.com/line_chart?id=4
// In the views/line_chart.html template
<script>
..
..
..
.
.
$.ajax({
url: 'http://yourdomain.com/get_data_for_line_chart?id={{ id }}',
success: function(response) {
data.addRows(JSON.parse(response).data);
chart.draw(data, options);
}
});
</script>
This needs to execute from your application as a shell script.
'/path_to_phantomjs' '/path_to_rasterize.js' 'http://chartmaker.yourdomain.com/line_chart?id=4' '/output_file_path'
system("'/path_to_phantomjs' '/path_to_rasterize.js' 'http://chartmaker.yourdomain.com/line_chart?id=4' '/output_file_path'")
import subprocess
subprocess.call(["'/path_to_phantomjs' '/path_to_rasterize.js' 'http://chartmaker.yourdomain.com/line_chart?id=4' '/output_file_path'"])
shell_exec("'/path_to_phantomjs' '/path_to_rasterize.js' 'http://chartmaker.yourdomain.com/line_chart?id=4' '/output_file_path'")
The image can be uploaded to S3 or wherever you want.
Explore ways to play with rasterize. I took the script from here. I did tweak it a bit but you can do a lot.