You are currently viewing PhantomJS With HighCharts For Generating Charts Images In A PDF File

PhantomJS With HighCharts For Generating Charts Images In A PDF File

  • Post published:June 11, 2015

JavaScript is one of the most advanced and complex programming languages and JS Programming demands ultra-efficiency and optimized execution from the end of the Programmer. There are some technical complexities that appear while working with JavaScript. These can be perplexing at times and be highly time taking but a well-compiled research and optimum implementation can sort out any complex JS problem in a short period of time. One of our vteams also encountered such a complex JS problem during an application development, that was assigned to vteam #474 in which implementation of various types of charts for the users was needed. For this, a pure JavaScript library for drawing charts in browser was used i.e; HighCharts. In the beginning, requirement was to utilize those charts on client side only. Unexpectedly, an urgent requirement to export a detailed report containing some of the charts into PDF document came from Client.

In order to add charts into PDF, it was necessary to convert those charts into images first and then use those images in PDF document. To implement this feature, vteam #474 had two choices only; either use some server side library to generate charts or somehow be able to generate the charts on server side by using the same library that is currently being used to generate chars on client side/in browser.

Using a server side library would be the typical approach that might have the following drawbacks:

  • Needed time to learn new library if it was the first time using it
  • Time required to prepare data for the new charts library
  • To match it with the existing charts colors and scheme would also require time and money
  • Maintenance would be difficult if any single update would require changes in both server and client side charts

Considering the above drawbacks, it would be ideal if somehow it becomes possible to run HighCharts library on server side. vteam #474 developer Faisal already knew that there were Full Stack JavaScript solutions and JavaScripts could be run on server side. After doing some R&D, Faisal found PhantomJS which might perform it. Fortunately, It was very easy to install PhantomJS and also installer was available for windows. After going through documentation about PhantomJS and HighCharts, Faisal concluded a quick command to generate the charts with same JSON input that were being used for client side charts. He used the following command to generate chart image and then used it to generate PDF document:
phantomjs path/to/highcharts-convert.js -infile “jsonfile.json”-outfile “output_image.png” -constr Chart