AIM Institute Technology Blog

We’ve provided our Careerlink clients various metrics for the past fifteen years and have consistently struggled with how to present them. Early on, we decided to render the metrics using JavaScript on the client for a couple of reasons:

1. The data rendering would be much more responsive.
2. We didn’t need to worry about graphics construction on the server side.

Since there was no client-side raster (or vector) library, all of the charting had to be done with HTML DIV’s and such. There were two disadvantages to that:

1. We couldn’t rotate the text to follow the right-hand-rule, so all bars had to be horizontal.
2. Printing bar colors required adjusting browser settings (to print background colors) or taking a screen-cap.

The HTML 5 Canvas object provides the client-side raster library. I evaluated a few JavaScript libraries and settled on RGraph to re-implement the client metrics fairly cleanly and easily.  RGraph provides a tremendous amount of features and is free for non-commercial use. (Commercial use requires a one-time purchase of an inexpensive license). It was the most mature library I’d come across.

The RGraph library was very easy to implement and renders graphs quickly. I didn’t encounter any issues with its implementation, but I would like to be able to adjust gutter widths (the space around the graph where the labels go) individually.

Thumbs-up for a library that works out of the box.

One Response to “HTML5 Canvas and Client-side Graphs”