Graphs, charts using Google API with example - U1

Google Charts

In last post we have seen how to create the Pie-Chart using the Google Charts API.

Today we'll see how to deal with Horizontal chart using the Google Charts API...

It is fairly flexible, with many things you can change and customise same as Pie-chart. 

Horizontal Bar Chart

Programming Lang..

http://chart.apis.google.com/chart? cht=bhg&chs=550x230&chd=t:90,55,110,90& chxt=x,y&chxl=1:|Javascript|PHP|CSS|JQuery& chxr=0,0,120&chds=0,120&chg=8.33,0,5,5&chbh=35,0,15&chco=F640DB

Explanation...

As we have seen in last post, there are 3 parameters that ALL charts MUST have, and they are cht, chs, chd.

Chart Axis Type (chxt): specifies the different axis that will be displayed on the chart. These axes are referenced by their index numer (that is the order you have specified them in). Counting starts at 0. So in the example, x-axis is #0, and y-axis is #1.

Chart Axis Label (chxl): specifies the label you want for the axis/axes. The syntax is generally quite straightforward with the axis number coming first followed by a colon':' and then the label names.

Chart Axis Range (chxr): specifies the start/end range of the axis. The first number specifies the axis, second and third number specifies the start and end of the range respectively. In most cases, you will probably want your range to be slightly more than your maximum data value.

Chart Data Scale (chds): specifies how your data will be scaled. General rule of thumb is unless you want to do some special scaling (eg. compare percentages of the values instead of showing the actual value) you will scale according to your range. Whatever you have set the min/max of your range (chxr) will be the min/max of your scale (chds).

Chart Bar Size (chbh): specifies the width of the bar and also the spacing between bars. The first number (mandatory) specifies the width of the bar. The second and third are optional and they specify the spacing between bars in a group and between groups. In this example, the bars have width of 35, and each group (separated by commas in chd) is separated by width 15. As each group only has one data point, changing the middle value will make no difference (to have more than one data point for each group, you need to use vertical bars '|').

Chart Grid lines (chg): draws the lines behind the bars, making it easier to read the chart. Although optional. The syntax chg=,,, itself is easy, but getting the grid lines to draw correctly is harder. Of the four values, the last two are optional and determine what the line will look like when drawn. The first values is for vertical grid lines and the second is for horizontal grid lines.

Getting the grid lines to draw at the intervals you want (eg. every 10 units) is the tricky bit. Google by default assumes your axis range is 0-100 which isn't always the case, so some basic maths is needed. IF your axis was 0-100, then to have vertical grid lines every 10 units is simple: chg=10,0,5,5. But in the example the range is 0-120 so the grid lines will display incorrectly if you simply put in chg=10,0,5,5. To get the lines to show correctly for range 0-120, you need to 'scale' the grid line value. Luckily it is quite simple: 100/120*10 which gives you 8.333..., therefore chg=8.33,0,5,5. The formula is basically 100/MaxRange*IntervalAmount. Also, if the result is not a whole number, give the value to two decimal places, otherwise the grid lines will be slightly off.