I couldn’t resist. Note the is_numeric? method, which is not very pretty Ruby (I should open up a base class somewhere and put it there), but it works and is only syntactic sugar anyway, to make the simpleEncode method itself a little nicer to read.

Note that it produces slightly different output than the PHP one, namely because Ruby handles integer arithmetic a little differently, thus the round() method was not needed here. If I changed this line:

      chartData < < simpleEncoding[simpleLength * val / maxValue];

to this:

      chartData < < simpleEncoding[(simpleLength * val.to_f / maxValue).round];

the output is identical. But visually they're nearly indistinguishable when charted, as the difference amounts to (literally) a rounding error at any given point.

def is_numeric?(arg)
  Float arg rescue false
end

def simpleEncode(values, maxValue=-1)
  simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  simpleLength = simpleEncoding.size - 1

  # Just ignore any non-numeric values                                                               

  maxValue = values.select{|f| is_numeric?(f) }.max if maxValue < 0

  chartData = 's:'
  values.each do |val|
    if is_numeric?(val)
      chartData << simpleEncoding[(simpleLength * val.to_f / maxValue).round];
    else
      chartData << '_';
    end
  end
  return chartData;
end

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;
}

The new Google Chart API is just awesome. I can say that with confidence, because even I was able to get it working in no time flat.

I have a web app (mostly PHP) I use to manage some sales data, and I used to graph my data using PHPlot. PHPlot is a nice PHP graphing package; at the time I started using it, it was the best I could find. Still, while I realize I’m not the brightest frog in the pond, it took me quite a few hours of noodling around with PHPlot to get it to look like I wanted a couple of years ago when I implemented it.

Well, I’m proud to say that after about an hour this morning, I had completely duplicated my existing graph using the new and hotness.

One reason that it didn’t take me long is that the Google Charts folks (do they have their own nickname? Chooglers?) made a decision to return something from whatever mess you send them, even if it’s not what you wanted. This many seem like a small thing, but it didn’t happen by accident. There’s a significant amount of magic going on behind the scenes to return some semblance of a graph from the most twisted parameter arguments. But it’s a big, big deal because it makes it so much easier to incrementally make it look how you want.

What’s more, because it’s REST-based, you can right-click on an image generated by Google Charts, wherever you see one, and see the URL, which will contain all the options, right there for you to copy and even change. And since each image is just a URL, you can try variations, and they’ll all be in your web history, so if you make a misstep, the last known good one is but a back-button click away.

I love this thing! I’ve posted a bit of PHP that I hope will be helpful, along with a quick explanation of something that initially threw me about the chart data you have to send to Google Charts.