This was a full site development project for a tool which evaluates a company’s sustainability reporting effectiveness. Prospective customers can complete a questionnaire, the results of which are plotted on a dynamic spider graph. The analysis report can also be downloaded and shared as a PDF.

Dynamic Graph Creation

There are several tools for generating dynamic graphs on the fly; Google Charts Api is the most prominent, other popular ones include High Charts and YUI Charts.

An important consideration for this project was that an interactive version of the graph was required for the web and a static image version for the pdf document. Since Google has deprecated its static charts api, and because the layout of the chart I needed was fairly simple I decided to generate the graph graphic manually.

I used the GD graphic processing library which is pre-compiled with PHP to manually plot the graph axis, labels and polygons. This gave me maximum control of how the graph should look and I was able to precisely match the required design.

I then embedded the image on the page and overlaid popup hints using jQuery to introduce a dynamic and interactive element to the chart.

PDF Generation

I used the fPdf library to create the PDF version of the report. This included the embedded graphical version of the graph, along with formatted text and company branding. A more full-featured pdf library is pdfLib, however this requires a license and for basic documentation generation, fPdf is quite sufficient.

Cache Control

Because the generation of dynamic graphs and PDF documents takes a short amount of processing time, I introduced a layer of caching so that reports and images which are accessed frequently are not re-generated each time. This speeds up page execution while also giving the client full control over the duration and volume of the server cache.

Try the Reporting Tool