absence-piechart
The Google Chart API has been deprecated. This is our solution to overcome this issue. We have followed the same URL pattern outlined in the following documentation. The solution we have provided is for pie charts only and can be used as a starting point for rendering chart images.
This is a Node js application that can run on a Heroku server that returns the buffer of a PNG image. The arc values for the pie chart are retrieved from the request URL. The pie charts are drawn using the Chart.js library.
URL parameters
The following are the parameters we support. In order for a pie chart to be drawn, the following parameters have to be present in the URL.
- chs - The chart size (width x height).
- chd - The chart data.
- chl - The slice labels.
- chdl - The chart data labels.
- chco - The chart arc hex codes.
Run locally
To run the application on your localhost, do the following.
- Make sure you have Node.js installed. The latest version can be downloaded here
- Clone this repo.
- In Terminal, type the following commands.
cd absence-piechart
node app.js
- In your browser, visit your localhost. Update the parameter values in the url below to see different results.
http://localhost:3000/piechart?chs=600x90&cht=pc&chd=t:0.01,.01,12,.01&chl=32%20hours|||11%20weeks%208%20hours&chdl=Pending|Approved|Deducted|Remaining&chco=00FF0066|00FF00|0000FF44|ADD8E6
Setting up a Heroku server and deploying local changes
Follow the steps for Getting Started on Heroku with Node.js .
Once you are ready to push your local changes onto Heroku, perform the following commands in Terminal.
git add --all
git commit -m "commit message goes here"
git push heroku master
Files
- Procfile declares what commands are to be executed on Heroku. The procfile starts the Node.js application.
- package.json and package-lock.json list the appliation dependencies. These dependencies are installed when the application is deployed to Heroku.
- app.js is the webserver. It listens for requests and returns the buffer of a pie chart png image.
References
- https://developers.google.com/chart/image/docs/making_charts
- https://www.chartjs.org/
- https://devcenter.heroku.com/articles/getting-started-with-nodejs
- https://www.npmjs.com/package/throng