as days pass by, by Stuart Langridge

Google’s new Chart API is a useful little thing that returns a PNG of a chart based on the URL you feed it, so you can create graphs like this:

by just specifying the <img> src attribute as http://chart.apis.google.com/chart?cht=lc&chs=200×125&chd=s:helloWorld&chxt=x,y&chxl=0:|0|10|20

However, as Marty Alchin rightfully complains about, it doesn’t handle negative numbers at all. Obviously Google, being the internet success story that it is, never has any numbers for anything that dip below zero, but not everyone’s so lucky. However, there are ways to handle negative numbers in the Google Chart API.

Sort of, anyway. This is a bodge. Hold your nose and dive in. I’m sure Google will forcibly inject clue into their charting engine at some point, but until then you can sorta-kinda get around the problem like this.

For line graphs with negative numbers, you need to do two things. First, lie about the values on the y axis (so you display on the graph that the y axis goes between -10 and 10, in the above example, even though it actually goes between 0 and 20). You’ll obviously need to transform your numbers appropriately, so a data series [-10, -5, 0, 5, 10] should be fed to the graphing engine as [0, 5, 10, 15, 20]. The second thing to do is to draw a horizontal line at 0 on the y axis; if we had real negative number support then that’s where the x axis should be, and so the extra drawn line “stands in” for it. That’s easy enough to do, using the grid lines chg parameter; just make the grid only exist horizontally, and have the grid divide the graph into two 50% parts, with chg=0,50,1,0. The four parameters 0, 50, 1, 0 mean “don’t draw vertical grid lines (0)”, “draw a horizontal grid line every 50% of the y axis (50)”, and “make the line solid with no gaps (1,0)”.

It’s also possible for bar graphs, although it requires a small amount more ingenuity.

This graph has negatives, right? Well, how it’s done might be clearer if you see this graph:

Yep, you just stack up the bars, and make the bottom bit of the stack be transparent (note that in the first graph we have chco=00000000,ff0000,0000ff, which specifies colours for each data series; the first item in there is 00000000, which is in format RRGGBBAA, meaning 0% red, 0% green, 0% blue, and 0% visible. Actually, it could have been ffffff00, or deaded00, or anything; all colours are the same when they have 0 opacity! The second graph is exactly the same, except now the transparent bars are shown in green so you can see how it’s done.

You’ll note that all these graphs still have the “real” x axis (the line at the bottom of the graph) still visible. This is because there’s no way to turn it off, which is unfortunate both for this fake-the-negatives approach and because you can’t do decent sparkline graphs if you have to display the axes.

Both of the tricks above are horrible fudges which only need to exist until the Google Chart people rediscover the minus sign on their keyboards, which I’m sure is already in their bugtracker somewhere. If it’s not, then here, Google, take some of these: - - - - - - - - - - - - - - - - - - - -. Hope you find them useful.

This entry was posted on Saturday, December 8th, 2007 at 1:37 am and is filed under Howtos, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.