{"id":531,"date":"2008-11-06T20:00:08","date_gmt":"2008-11-07T01:00:08","guid":{"rendered":"http:\/\/unitstep.net\/?p=531"},"modified":"2011-12-01T05:25:55","modified_gmt":"2011-12-01T10:25:55","slug":"properly-setting-axis-ranges-and-data-scaling-using-the-google-chart-api","status":"publish","type":"post","link":"https:\/\/unitstep.net\/blog\/2008\/11\/06\/properly-setting-axis-ranges-and-data-scaling-using-the-google-chart-api\/","title":{"rendered":"Properly setting Axis Ranges and Data Scaling using the Google Chart API"},"content":{"rendered":"

\"\"<\/a><\/p>\n

The Google Chart API<\/a> is a great way to dynamically create chart and graph images for any non-static data you might want to display to your visitors, such as stats for a runner’s training log<\/a>. <\/p>\n

Although you can use your own server-side solution for generating charts, using PHP<\/acronym>’s GD Image Processing Library<\/a> or even a fancy chart library like pChart<\/a>, this can increase the drain on your server’s resources. Client-side solutions that utilize the canvas<\/code> element and jQuery<\/a> or Flash<\/a> can be very nice and easy to use, but may slow down the browser if there are a lot of charts.<\/p>\n

Google Charts offers a nice trade-off; by using their service you offload the processing and bandwidth and get back a simple PNG<\/acronym><\/a> image, but you must learn to use the API. Additionally, there’s also the risk that the service may throttle you, even if there’s no current usage limit.<\/p>\n

Problems specifying Axis Ranges – Data points are not changed!<\/h3>\n

The API for Google Charts essentially consists of passing different query string parameters and their values and getting back a PNG<\/acronym><\/a>-format image. As a result of this, passing in parameters is a bit quirky, and information in the API guide is a bit sketchy in this respect.<\/p>\n

<\/p>\n

One such example with quirky behaviour is properly setting the axis’ ranges<\/a>, or scales, of a chart. By default, all charts are set up on a 100×100 grid. It would seem that by changing the axis range, these values will be adjusted accordingly, affecting the position of any data points you’ve plotted.<\/p>\n

But this isn’t the case; instead, changing the axis range with the chxr<\/code> parameter only<\/strong> adjusts the position of any axis labels<\/em> you might have, and does not<\/strong> affect the position of data points. Instead, data points will continue to be plotted as if they were on a 100×100 grid.<\/p>\n

Illustrating the problem<\/h3>\n

The following examples illustrate this point. We plot a set of points, {(10,40),(30,60),(50,70),(70,20),(90,40)}<\/code> using an X-Y line chart<\/a>. The first chart illustrates the points on the default grid of 100×100. Because axis labels\/positions have not been specified, the chart has been filled with default axis labels, which are values in the respective positions.<\/p>\n

\"chart<\/a><\/p>\n

URL: http:\/\/chart.apis.google.com\/chart?chs=200x200&cht=lxy&chd=t:10,30,50,70,90|40,60,70,20,40&chxt=x,y&chg=10,10&chm=o,0000FF,0,-1,5,0<\/code><\/pre>\n
In this case, the points are plotted in the correct positions.  (Points have been highlighted with markers<\/a> for clarity and grid lines spaced 10 units apart)<\/p>\n
However, if we simply change the axis ranges by specifying the chxr<\/code> parameter to be chxr=0,0,200|1,0,200<\/code>, the axis labels change, but the data points are not properly scaled:<\/p>\n
\"chart<\/a><\/p>\n
URL: http:\/\/chart.apis.google.com\/chart?chs=200x200&cht=lxy&chd=t:10,30,50,70,90|40,60,70,20,40&chxt=x,y&chg=10,10&chm=o,0000FF,0,-1,5,0&chxr=0,0,200|1,0,200<\/code><\/pre>\n
This is further evidenced by the grid line spacing; though it’s still set to 10 units, the lines would appear to be 20 units apart in the above graph.  This means that internally, the chart is still using a 100×100 grid.  So, how do we fix that?<\/p>\n
Plotting data properly with axis ranges<\/h3>\n
The documentation<\/a> would benefit from being clearer in this respect.  <\/p>\n
In order to properly scale data, you must use data scaling<\/a> whenever you adjust the axis ranges to non-default values.<\/strong><\/p>\n
For the above example, since we have set both axis ranges to 0-200, we must set the data scale of both data sets (X and Y values) to 0-200 as well.  We accomplish this by setting the chds<\/code> like so:<\/p>\n
chds=0,200,0,200<\/code><\/pre>\n
The resultant graph is now as expected for the given data points:<\/p>\n
<\/a><\/p>\n
URL: http:\/\/chart.apis.google.com\/chart?chs=200x200&cht=lxy&chd=t:10,30,50,70,90|40,60,70,20,40&chxt=x,y&chg=10,10&chm=o,0000FF,0,-1,5,0&chxr=0,0,200|1,0,200&chds=0,200,0,200<\/code><\/pre>\n
(Curiously, grid lines are still placed 10 units apart according to an “internal” 100×100 grid.)<\/p>\n
I couldn’t find anything clear in the documentation about this, but instead found some helpful threads<\/a> on the Google Groups for their Charts API that aided me in figuring out exactly how this all works.<\/p>\n
Clear as mud?<\/h3>\n
There are still some things I’m not clear about, such as what data scaling<\/a><\/em> is actually supposed to mean, and why simply changing axis ranges does not properly scale data in the first place.  Additionally, the data formats page<\/a> specifies numerous other ways of specifying data in more compact, encoded forms, but these formats do not seem to support data scaling.  Does that mean these formats are confined to a 100×100 grid?  <\/p>\n
I haven’t had the time to fully experiment with the API, but hopefully will have time to learn.  In the meantime, I hope you found this information useful.  If you have some information I haven’t presented here, please don’t hesitate to comment below!<\/p>\n
Note: The information and graph images here reflect the state of the Google Chart API as of the date of publication. (2008-11-06)<\/p>","protected":false},"excerpt":{"rendered":"
The Google Chart API is a great way to dynamically create chart and graph images for any non-static data you might want to display to your visitors, such as stats for a runner’s training log. Although you can use your own server-side solution for generating charts, using PHP’s GD Image Processing Library or even a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[290,208,79,23,291,289,277],"tags":[426,478,451,413,479,477],"_links":{"self":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/531"}],"collection":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":21,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/531\/revisions\/1309"}],"wp:attachment":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}