Google Scatter Charts != Business Quadrant Charts

At this point we were a little confused. We did not think our ask was special. All we wanted was to create a simple business graph. Why was it not easy?

Further investigation of the Google Scatter charts revealed they were perfectly suitable for a scientific scatter plot, but highly unsuited for a business quadrant chart. Why was this? A review of requirements revealed that they were fundamentally different animals, they just looked similar on the surface.

A Scientific Scatter Plot has the following attributes:

  • a series of (x,y) data points
  • auto scaling of the x & y axis to fit the data
  • x & y axis labels are the x & y data values

Here is a great example of a scientific scatter plot.

A Business Quadrant Chart has the following attributes:

  • a series of (x,y) data points
  • x and y axis labels are not related to the numerical data values used to position points
  • fixed x and y axis scale
  • data points generally lie within a grid box

This is an example of a Business Quadrant Chart.

A Scientific Scatter plot is relatively simple and its attributes are obvious. In contrast a Business Quadrant chart is more fluid and complex. It is not constrained by science. The concepts being portrayed are relative, not absolute values. This makes a business quadrant chart special.

Some of the things affected by the relative nature of the data include:

Conceptual Axis Labels: The axis labels must be explicitly specified. The axis labels in a Business Quadrant chart are relative terms:  Low -> Medium -> High or Weak -> Strong or Slow -> Quick or Simple -> Complex. They are not numerical values derived from the actual (x,y) position of the data points. This makes it impossible for the graphing engine to automatically derive axis labels from the data. 

Fixed Axis Scaling: The axis scale must be explicitly specified. It is common for some areas of the chart to not have any data points. All quadrants need to be displayed. An axis that depicts risk as Low, Medium, High may not have any corresponding Low data points. But the chart still needs to depict a Low grid column that is empty of data points. Business demands that we ignore the available data and portray potentially available data. It is not possible to autoscale the axis from the provided data.

Grid Lines & Data Points: Grid lines need special handling. Grid lines occur between the axis labels. A Low -> Medium -> High axis has 2 grid lines separating Low from Medium and Medium from High. This means the grid lines also occur between the data values. This has a very subtle side effect on the graphing engine when drawing grid lines is required. It would be natural to internally represent the low, medium, high data point values using 1, 2, 3. This means you need a grid line at 1.5 and 2.5, but not at 0.5 or 3.5.

Data Point Collision: Colliding data points need to be shifted so they are visible. The relative nature of the data means that there will often be data point collisions. All (High Risk, High Cost) data points will have the exact same internal data values. The data points will all need to be displayed in the same grid box, but separated so they are all visible.

Clearly Google Charts was not designed to support Business Quadrant charts. We needed to find a different solution.