Negative numbers in the Google Chart API

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: a simple example line graph by just specifying the <img> src attribute as,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. a simple line graph
with negative numbers 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. a bar graph with negative numbers This graph has negatives, right? Well, how it’s done might be clearer if you see this graph: a bar graph without negative numbers, with the parts 'below the line' coloured in 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.

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)