What are Scatter Charts?

I was recently involved in a situation where we needed a simple graph to depict the likelihood of an event versus the impact of that event. All we needed was a simple 5 x 5 grid showing a bunch of data points. Both the X axis and the Y axis would have labels like Very Low, Low, Medium, High, Very High. We needed a Scatter Chart. I have seen lots of them. Nothing special. We just needed to add a graph to a Drupal system and generate dynamic graphs based upon data in the system. This should be simple.

This need spawned a quest that quickly took on a life of its own.

The initial approach was to use the stock Drupal graphing package Charts. Which gave us no joy. We could install the required modules and successfully create lots of other types of charts that looked right. Scatter charts seemed impossible. We could not make sense of the data being presented when we created a scatter chart.

This caused me to step back and examine the problem a little closer.

A line chart, bar chart, pie chart, ... are basically the same: a series of "y value" data points. These types of charts also often include multiple series of data which are portrayed as multiple lines in a line chart or multiple bars in a bar chart. The X axis often depicts things like months of the year or cities. Every data series has a Y value for each X value. Simple. Common. Well understood.

Time to think about Scatter charts. Everyone recognizes one when they see it (kind of like art?). And they understand what the chart is depicting. But Scatter charts are fundamentally different than line, bar and pies. A scatter chart is a single series of (X,Y) points. The data could be sparse. The data could be concentrated in any specific region of the chart. There is no need to have every X and Y value accounted for. It is a 2 dimensional bunch of points. Dots on a sheet of graph paper.

Scatter charts are different. And I needed to provide some code to display a scatter chart from a Drupal system.

Realizing this I experimented using both Google Charts and HighCharts as the chart drawing engine. Drupal Charts offered a "scatter chart" type of chart and both drawing engines supported scatter charts. All of my attempts at providing a series of (X,Y) points ended up in multiple series being portrayed (with seemingly random X values). Recall that a scatter chart is a single series of data points. I examined the code of the Drupal Charts module and discovered that it did not have any support for producing a (X,Y) series. Instead it was producing 2 series of Y values with an assumed set of corresponding X values.

Drupal Charts was broken (I submitted feedback). So I made some custom modifications to the Drupal Charts code to generate a single (X,Y) series and successfully created a Google Scatter chart. But it was not what we wanted. Similar, but not close enough.

Google was creating what I would call a Scientific scatter plot. Refer to Wikipedia Scatter Plots for a visual example. This was not what we wanted. Google gave us science, our audience was Business. We needed a Power Point style "business quadrant" chart (I just made up that term). Think Forresters Wave style charts.

Scatter charts were not working for us. I needed to sit back and figure out how to achieve our initial goal without creating a totally custom graphing engine.