Graphael Prototype Business Quadrant Chart

We needed to produce a Business Quadrant chart and had decided to use the graphael graphing engine to do it.

The first step was to create a skeleton module based upon Drupal Charts design that would allow us to specify and supply the chart data via a View. The initial version only provided the (x,y) data points by selecting a series of nodes.

Next step was to hook in the graphael charting engine to display the chart. The first pass simply copied the example graphael dot chart logic and displayed a fixed predefined graph (small steps). This version allowed us to create a View Block and locate it on a page which then displayed the example graphael dot chart. This proof of concept gave us end to end definition of a simple dot chart. Success! It worked fine.

The next step involved feeding real dynamic data to the chart. This is where we started to encounter challenges. Our data nodes were a simple content type with a X and a Y field that would have a value from 1 to 5. Our first chart of 4 dots located in the 4 corners of the plot display area looked good. As soon as we altered the data to not include the 4 corners we started getting unexpected results.

graphael was autoscaling the data and shifting the data points so that they were centered in the plot display area. We needed the real data points to be displayed within a fixed display area.Time for some secret sauce. To prevent the automatic scale and shift we needed to always include 4 fixed data points that represented the 4 corners of the graph area. Additionally we need to "hide' these data points as we did not want to show them in the chart. Invisible data points to the rescue. This change allowed allowed a single data point graph to be displayed correctly. A (5,5) point was placed in the upper right corner, a (3,3) was placed in the centre and a (1,1) was placed in the lower left.

graphael provided tooltip and url click through support so these were added next. The tooltip text was taken from the node title and the url was a link to the actual underlying node. This meant that mouse over displayed the title of the corresponding node and a click would display that node in the browser window.

Things were looking good. We had the basic concepts working. Time to make chart definition a little more robust.

The Views interface was enhanced to provide the following features:

  • X axis minimum value
  • X axis maximum value
  • Y axis minimum value
  • Y axis maximum value
  • X axis labels
  • Y axis labels
  • X axis title
  • Y axis title

We now had a workable prototype. Next step was to try some real world data and refine the prototype...