The docs for the new Google Charts API include a Javascript function called simpleEncode. It demonstrates encoding a data set into a “Simple encoding” as expected by the API. You can read the docs to see more about how this works (as well as the other two encoding methods if you need more granularity), but I didn’t catch on the first time through. So herewith, a quick explanation in my terms of what’s going on, followed by a PHP function which does the same thing.

The ‘Simple encoding’ converts your data values into an alphanumeric string, composed of upper- or lower-case letters or the digits 0-9. But to do it right, you have to realize what it’s expecting. For the purpose of the Google Chart, those values (ranging from ‘A’ at the bottom to ‘9′ at the top) represent the 62 discrete points you can plot using Simple encoding. If you have a graph which needs more than 62 discrete points, you’ll need to use one of the other encodings. But as the granularity guidelines say, don’t overestimate the granularity you really need for your chart. Remember that charting is about visualization, and unless your chart is quite large (and Google charts are limited to 300,000 pixels), there may not be much visual clarity gained by maximizing granularity.

More importantly, regardless of which encoding you use, you still need to understand this key point: Your data has to be mapped proportionally onto the available data points for the encoding you choose. This is simple once you get it, but maybe not so simple at first. So let’s try an example. Let’s say you want to plot this series of data points:

1, 3, 11, 8, 4, 2, 9

If you just chart those numbers directly without encoding them, Google will interpret them essentially as “a dot 1% of the way from the bottom”, “a point 3% of the way from the bottom”, “a dot 11% of the way…”, etc. You’ll get a graph like this.

That’s probably not what you were after. But if you encode it properly, you’ll end up with a chart like this.

Much better, don’t you think?

So the whole trick is to take your data points, figure out what the maximum and minimum values you want to display are, and then proportionately adjust each value in your data points to map them onto the available graph points.

In our hypothetical data set, 0 is the lowest value we’re going to plot, and 11 is the highest. Proportionately mapped, 3 would be about 27% of the way between 0 and 11, 8 about 72%, 9 about 81%, etc. The letter ‘R’ is about 27% of the way from from A all the way up to 9, so 3 encodes to ‘R’. ’s’ is about 72% of the way up, so 8 encodes to ’s’, and so on.

OK, so the following PHP function takes a one-dimensional array and an optional maximum value (used if you wanted, for instance, to specify the highest visible value on the graph, even if none of your data points go that high). If you don’t specify a maximum value, the function will calculate the highest value from among your data points and use that.

It returns a string representing the Simple encoding of your datapoints, prepended by the ’s:’ specified in the Google Charts API. In short, it does exactly the same thing as the sample Javascript function provided in the API docs, only it doesn’t require you to specify a max value.

So

print simpleEncode(array(1, 3, 11, 8, 4, 2, 9))

returns ’s:GR9sWLy’, which you can see if you ‘view image’ on the second graph above is what I used to create it.

No magic here, I just thought it might be useful to someone.

function simpleEncode($values, $maxValue=-1)
{
  $simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  $simpleLength = strlen($simpleEncoding)-1;

  if ($maxValue < 0) $maxValue = max($values);

  $chartData = 's:';
  foreach ($values as $currentValue) {
    if (is_numeric($currentValue) && $currentValue >= 0) {
      $chartData .= $simpleEncoding[round($simpleLength * $currentValue / $maxValue)];
    } else {
      $chartData .= '_';
    }
  }
  return $chartData;
}