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.
Isn’t this just what you have to do if you have any kind of value range that doesn’t exactly match their [0, 100], [0, 63] or [0, 4095] ranges — scale and offset?
It’s pretty kludgy, I agree, though. It’d be nice if Google didn’t require this scaling and offsetting.
I’ve been investigating using the Charts API in the SpamAssassin rule-QA backend web app, and it’s not great… we’d write nearly as much code to use our existing gnuplot-based charting!
Posted by Justin on December 8th, 2007.
When you have to do the kind of ridiculous tricks that you’re describing, it’s best to just use a different tool. Doesn’t Swivel do the same thing that the Charts API does?
Posted by http://fragglet.livejournal.com/ on December 8th, 2007.
fragglet: agreed, but installing a tool on my own server means I eat the bandwidth and CPU time for it…
Posted by sil on December 8th, 2007.
[...] Negative numbers in the Google Chart API (tags: howtos web) [...]
Posted by links for 2007-12-09 « Breyten’s Dev Blog on December 9th, 2007.
I had the same issues before realizing it was entirely planned that way. If you look at what Google has used this charting for (Trends and Analytics), you can see why they made this decision. They don’t want people passing thousands of data-points to a graph that only has, say, 250 pixels.
Still, it makes the API hard to use. There needs to be some intermediary, and I’m sure there will be soon.
I wrote more here:
http://www.adamduvander.com/simple/infovis-and-calculators-for-the-masses
Posted by AdamD on December 11th, 2007.
Hi,
I’ve made a bit of a GUI for the charts API.
Let me know what you think!
Google Charts GUI
Posted by Jon on December 14th, 2007.
[...] noch eine Idee von Stuart Langridge, der mittels Transparenzen die links stehende Darstellung für negative Zahlen benutzt. Das [...]
Posted by Die Chart-API von Google verstehen und effektiv einsetzen bei im web gefunden on February 13th, 2008.
[...] The Google Chart API is fun, easy, and doesn’t rely on Flash at all. Which of course means it lacks the interactivity of a Flash-based chart, but it’s compatible with more platforms and is by far the easiest to implement. One drawback is that (at the time of writing) it does not support negative numbers without cheating. [...]
Posted by The Weekly World Whatever. Served Fresh Daily. | Web developers: 4 chart widgets you can use for free on March 10th, 2008.
[...] first of these can be worked around with a hack which can be seen here, however although this works well for relatively stable, administrator created graphs, it gets a [...]
Posted by OK, I admit I was wrong - charting in Rails Redux | PocketSmith on July 17th, 2008.
[...] Dealing with Negative numbers Bookmark on del.icio.us Filed under: Groovy, Programming, Technology by — jb @ 2:45 am [...]
Posted by Indefinite Articles » Google Chart API on September 6th, 2008.
Excellent article, and excellent trick :)
I was wondering how can I use this trick to have negative numbers AND multiple data sets… :-S
Because for your trick you are using stacked-bars. But I need to display also side-by-side (grouped) bars… with negative values :(
Anyone has any idea?
Posted by FilmeNoi on June 25th, 2009.
Ok, I found out that nowadays google chart api supports zero-line:
http://code.google.com/apis/chart/styles.html#zero_line
Posted by FilmeNoi on June 25th, 2009.
FilmeNoi: like this, surely? http://chart.apis.google.com/chart?cht=bvs&chd=t:50,50,30,50,100,50,20,100,50,10|0,0,20,0,0,0,30,0,0,40|20,30,0,30,0,50,0,0,20,0&chco=00000000,ff0000,0000ff&chs=200×125&chg=0,51,1,0&chxt=y&chxl=0:|-50|0|50&chbh=a
Posted by sil on June 25th, 2009.
Although if it does it natively now hten you don’t have to care
Posted by sil on June 25th, 2009.