Note: Google Image Charts (ie. the examples provided in this post) has been deprecated as of April 2012. You should be using the new Google Charts instead.

Few months ago I had a good look into Google Charts API and it was great! If you are not aware, Google Charts API basically allows you to create pretty graphs simply by using an URL with correct parameters specified. It is fairly flexible, with many things you can change and customise – which is where it becomes bit complicated. It is quite easy to generate a chart, but it wasn’t as easy to generate the exact chart I needed. So below are 6 examples charts with explanations and tips that will hopefully help you understand Google Charts better.

A few notes before I start

  1. The data/labels for all the graphs here have no meaning at all – just examples that I have come up with.
  2. I’ll explain each parameter probably only once (since they are generally the same across all graphs). If something is different or special I’ll explain it again.
  3. If you have any other tips/hints please share :)

Tip 0 (yes a tip before examples!)
Use this tutorial with Google’s own Developer’s Guide. Google’s guide is quite good, but just confusing at times. I won’t be going through every little bit since Google’s guide outlines a fair bit, especially the technical syntax.

Example 1: Pie Chart

http://chart.apis.google.com/chart?
cht=p3&chs=450x200&chd=t:73,13,10,3,1&
chco=80C65A,224499,FF0000&
chl=Chocolate|Puff+Pastry|Cookies|Muffins|Gelato

There are 3 parameters that ALL charts MUST have, and they are cht, chs, chd.

  1. Chart Type (cht): Specifies the type of graph you have (pie, vertical bar etc)
  2. Chart Size (chs): Specifies the pixel dimensions of your graph (width*height)
  3. Chart Data (chd): The data that you want to display in your chart

1. Chart Type (cht) is quite straight forward – select the chart type you want, and put in the corresponding code which can be found from Google’s Developer’s Guide.

2. Chart Size (chs) is a tad more complicated but not much more (just needs a bit of trial and error). You specify the size of your graph in pixels: chs=<width>x<height>. Other than the maximum limit, the hardest thing is how big to make your graph? My tips are:

Tip 1: Give a rough estimate, generate the graph then press ‘ctrl+a‘. This will highlight the graph boundary so now you can adjust the size accordingly.
Tip 2: For pie charts, a rule of thumb is: w=2.5h for 3D charts and w=2h for 2D charts.

3. Chart Data (chd) is probably the most complicated as each chart has a slightly different syntax for data (see below examples and Google’s Developer’s Guide). For pie charts you need to make sure that the sum of your data points is 100 – ie. calculate the percentages and use the percentages as your data points.

Now onto the optional parameters – ones that allow you to customise the look of your chart and make the look pretty :)

Chart Colour (chco) uses the Hex representation (RRGGBB) to specify the colour of your chart. What colour you pick is really up to you. For pie charts you can just put in one colour and all the segments will be shades of that colour. Or you can put in more and the segments will be a gradient from the first colour listed to the last colour listed.

Tip 3: If you have a fair few segments in your pie chart, I find listing 3 colours works well. It creates a relatively nice gradient and makes it easier to distinguish between the segments.

Chart Labels (chl) specifies the labels for your data. It is optional, but you probably want to include them, so your chart will makes sense! With pie chart, it makes sense that the number of segments you have is the number of labels. So if you had 6 bits of data, you’ll have 6 labels. However, unlike chd where values are comma separated, pie chart labels are separated by a vertical bar ‘|’.

Tip 4: If you want a space in your labels use ‘+’ where you needed spaces. eg. Puff+Pastry

Example 2: Horizontal Bar Chart

http://chart.apis.google.com/chart?
cht=bhg&chs=550x230&chd=t:100,50,115,80&
chxt=x,y&chxl=1:|Python|Java|Ruby|.NET&
chxr=0,0,120&chds=0,120&
chco=4D89F9&
chbh=35,0,15&
chg=8.33,0,5,5

Chart Axis Type (chxt) specifies the different axis that will be displayed on the chart. There are 4 types (x,y,t,b) and can be repeated (eg. you can have 2 x-axes). 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. There is just one small ‘exception’ (bug?) that I have discovered. For horizontal charts you need to “flip” the axis label and the data you provide. So if your data is chd=t:1,2,3,4 your axis label will have to be chxl=1:|Four|Three|Two|One. Again, this only happens for horizontal charts and I’m not quite sure why.

Note (not quite a tip): Just to re-iterate, for horizontal charts you need to “flip” (or reverse) the axis labels and data you provide for them to match. So the first label will match the last data, second label match the second last data etc. Note in the example, Python is the first label, but it has value 80 – the last data point. (Strangely enough, this doesn’t happen for vertical charts)

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. (eg. in the above the maximum value is 115, so I have set the range to be between 0 and 120)

Chart Data Scale (chds) specifies how your data will be scaled. My 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).

In order to display your chart correctly, you will need to use both, Chart Axis Range (chxr) and Chart Data Scale (chds). By default the range and scale is 0,100 – but chances are you won’t always want your axis to have a maximum of 100. Without correctly specifying these two parameters, your chart will still appear, but it will essentially be incorrect.

Tip 5: chxr and chds will generally be a pair and have the same values. The min/max specified in chxr will also be the min/max for chds.
Tip 6: If you want to display the data percentage-wise, the chxr and chds will differ. chxr will have range 0-100, and chds will be 0-max data point. For the example above, if the graph were to show the percentages of each bar the 4th line will be replaced with: chxr=0,0,100&chds=0,115&

Chart Bar Size (chbh) specifies the width of the bar and also the spacing between bars (and groups of 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 ‘|’ – see examples below).

Chart Grid lines (chg) draws the lines behind the bars, making it easier to read the chart. Although optional, I think these really are the icing on the cake for the charts. The syntax chg=<verticalGridLines>,<horizontalGridLines>,<lineSize>,<gapSize> 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. It really depends on personal preference and the type of chart drawn, but I find using 5 for each gives a nice dashed line. 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.

Tip 7: To calculate the value to correctly draw your grid lines, use the formula: 100/MaxRange*IntervalAmount. eg. Your graph has range 0-80, and you want an horizontal grid lines every 5 units: 100/80*5=6.25, therefore you will have: chg=0,6.25,5,5
Tip 8: If the value calculated from the formula is not a whole number, go to two decimal places for more accurate grid lines. (You can go to three or more decimal places, but I find two is generally enough)

Example 3: Vertical Bar Chart

http://chart.apis.google.com/chart?
cht=bvg&chs=350x300&chd=t:20,35,10&
chxr=1,0,40&chds=0,40&
chco=ff0000|ffa000|00ff00&
chbh=65,0,35&
chxt=x,y,x&chxl=0:|High|Medium|Low|2:||Task+Priority||&chxs=2,000000,12&
chtt=Tasks+on+my+To+Do+list&chts=000000,20&
chg=0,25,5,5

Chart Colour (chco) is quite straight forward. Note that for this example, I have used the vertical bar ‘|’ to separate the three hex colours in order to get different coloured bars. If I had used a comma ‘,’ then all the bars will be red (the first colour).

Chart Axis Style (chxs) allows you to apply a style to your axis. chxt and chxl (explained in Example 2) specify which axis you want, and their labels while chxs lets you specify the font colour and size for a particular axis. In this example chxs=2,000000,12 has set axis #2 to be black with font size of 12. Note: If you look carefully you’ll see something “strange” in the chxl for axis #2 (Task Priority axis). The empty ‘||’ on either side of the label is so the label will be centred.

Tip 9: If you want a second x-axis for say an axis label you can centre the label by having empty labels ‘||’ left and right of your actual label. The number of empty labels will depend on the number of categories in your main x-axis, and how long your axis label is. In this example, the axis label is quite short and there is a total of 3 categories (High, Medium, Low) so i have put one empty label on each side of ‘Task Priority’

Chart Title (chtt) specifies the title of the graph. Like other labels, if you want a space in your title use the ‘+’ character wherever you need a space.

Chart Title Style (chts) specifies the font colour and size of the title. It is quite similar to chxs.

Example 4: Stacked Vertical Bar Chart

http://chart.apis.google.com/chart?
cht=bvs&chs=350x300&chd=t:20,35,10,5|30,55,25,0|5,25,5,5&
chxr=1,0,120&chds=0,120&
chco=0A8C8A,EBB671,DE091A&
chbh=45,20,15&
chxt=x,y&chxl=0:|Pizza|Pasta|Pide|Salad&
chdl=Large|Medium|Small&
chg=0,8.3,5,5

Chart Data (chd) as explained in Example 1 specifies the data in your chart. However, note how the data for this slightly more complicated graph is written – it is separated using both commas and vertical bars. Each group separated by a vertical bar represents one series: the first group is Large, then Medium, then Small.

Chart Legend (chdl) specifies the legend for the chart. It is separated by vertical bars and corresponds directly to the way the data is represented.

Note that even though the largest individual data value is 55 (the 2nd value of group 2), the range/scale is put as 120 because the largest SUM of corresponding data values is 115 (sum of the 2nd values).

Tip 10: If you have a stacked chart, the range/scale will be the maximum of the sum of the corresponding values of each group. That is, compare the sum of all the first values in each group with the sum of the second, third values etc.

Example 5: Vertical Bar Chart

http://chart.apis.google.com/chart?
cht=bvg&chs=350x300&chd=t:20,35,10,10|30,55,25,5|5,25,5,5&
chxr=1,0,60&chds=0,60&
chco=0A8C8A,EBB671,DE091A&
chbh=15,0,20&
chxt=x,y&chxl=0:|Pizza|Pasta|Pide|Salad&
chdl=Large|Medium|Small&
chg=0,8.3,5,5

Data-wise, this chart is identical to Example 4a – the only difference is it is not a stacked chart (bvs), but just a standard vertical chart (bvg). The only changes are in the chxr, chds and chbh parameters to make the chart display nicely. Note how the range/scale is now 0-60, since it is no longer a stacked chart so the maximum value is 55.

Example 6: Line Chart

http://chart.apis.google.com/chart?
cht=lc&chs=450x330&chd=t:7,18,11,26,22,11,14&
chxr=1,0,30&chds=0,30&
chco=4d89f9&
chxt=x,y&chxl=0:|Mon|Tue|Wed|Thu|Fri|Sat|Sun&
chls=3,1,0&
chm=d,4d89f9,0,0,12,0|d,4d89f9,0,1,12,0|d,4d89f9,0,2,12,0|d,4d89f9,0,3,12,0|d,4d89f9,0,4,12,0|d,4d89f9,0,5,12,0|d,4d89f9,0,6,12,0&
chg=0,6.67,5,5

Chart Line Style (chls) specifies what the line will look like. The numbers are (in order) how thick the line will be, size of line segment and size of blank segment. So if you want a solid line (as per example) you will want the last value to be 0. Note, the line style is just the line – it does not draw the markers, that is specified in chm (see below).

Chart Markers (chm) specifies what the markers will be for each data point. Setting the markers is quite ugly – you need to specify the marker for each data point you have. Luckily, the syntax is relatively easy – the shape/type of marker, colour, data group, data point, priority. In this example there is only one data group (so the 3rd value are all zeroes) and you can see that the 4th value of each chm group goes up by 1 as it specifies the particular data point. The size is set to 12 to make the markers nice and big. Priority specifies how the markers are drawn – below or above the line and other markers.

Wow, so that finally concludes this tutorial which turned out much longer than I had imagined! Hopefully I’ve made sense, explained things well and helped you get a better understanding of how to use Google Charts API to get the charts you want/need. If you have any questions please feel free to ask, or if you have some tips please share them :)

  • Chii

    If you are writing an app that cannot access the google charts api (perhaps its behind a firewall and has no net access), you can try the jfreechart eastwood library , which aims to emulate the google charts api, but using jfreechart as the backend. Not as nicely rendered as google charts (in terms of anti-aliasing and colors), but good enough for most purposes.

  • ramireddy

    We have a requirement to display the stacked bars grouped.
    We have different types with the stacked bars.
    We have to display the Type of the Staked bars and the stacked bars under it.
    Can you give me how can i implement it?

    thanks in advance
    ramireddy

  • http://aspiresys.com Hari Toleti

    Hi,

    Can anyone tell me how to align the x-axis labels veritcally or some inclined angle, instead of having in regular horizantol way. Am facing problem of labels colliding.

    Thanks for the help.

    • Sri Laxmi

      Hi Hari,

      Have you got the solution for inclining the x-axis lables. I am also facing the same issue.

      Thanks for the help.

      • http://psychopyko.com pyko

        Hi Sri and Harry,
        From my understanding it is currently not possible to change the orientation of the labels :( However, a possible work around is to define two x-axis labels and have the labels alternating.

        pyko

      • Seshu

        hi, One of the best charts i have seen. I would like to display bargraphs in my android application. I display bar graphs but i need to add one more x – axis texts in below the main text i.e., 21/08/12 monday, 22/08/12 tuesday like that.. Can anybody have idea then plz reply 2 my mail and my mail id is
        s(dot)seshu143(at)gmail(dot)com. Thanks 2 all.

  • http://www.softech.vn Tran Hong My Nhat

    http://chart.apis.google.com/chart?
    cht=lc&chs=450×330&chd=t:7,18,11,26,22,11,14&
    chxr=1,0,30&chds=0,30&
    chco=4d89f9&
    chxt=x,y&chxl=0:|Mon|Tue|Wed|Thu|Fri|Sat|Sun&
    chls=3,1,0&
    chm=d,4d89f9,0,0,12,0|d,4d89f9,0,1,12,0|d,4d89f9,0,2,12,0|d,4d89f9,0,3,12,0|d,4d89f9,0,4,12,0|d,4d89f9,0,5,12,0|d,4d89f9,0,6,12,0&
    chg=0,6.67,5,5

    I want the word [Mon] or [Tue] .. dark blue and then how, please help me, thanks a lot

    • sathish

      Hi Use
      chxs=
      chxs=axis index,axis color,font size,alignment,drawing control,tick mark color

  • Shailendra

    Hi,
    In the following text there is one typo mistake:

    Note that even though the largest individual data value is 55 (the 2nd value of group 2), the range/scale is put as 120 because the largest SUM of corresponding data values is 155 (sum of the 2nd values).

    Note : above the sum is coming to be as 115 and which is less than 120 so ok and will scale properly. 155 is printed wrongly.
    Regards,
    Shailendra Mani.

    • http://psychopyko.com pyko

      Hi Shailendra,
      Thanks for picking it up! Fixed up now :)
      I either need to learn how to type or add up numbers correctly…or both!
      Cheers,
      pyko

  • Mark

    Yo mate!
    Thanks for making it so simple!! Well done.
    Just wandering if you could gimme a hand solving this..
    My data series vary quite a lot. Mainly I’ve got a few data series ranging from 0 to 1000′s.. So my question is: how can I display the top of the range? I mean, on the example link below I would like to display the full lines of all ranges, but wots happening is that when data>800 a flat line is shown..

    Thanks a lot

    http://chart.apis.google.com/chart?chtt=Promotion+2671&chts=000000,20&cht=lc&chs=600×300&chxt=x,y,x&chxl=0 :| 23|24|25|27|29|30|31|1|3|4|5|6|7|8|10|12|13|14|15|17|18|19|2:|May| | | | | | |Jun| | | | | | | | | | | | | | &chxs=2,0000DD,13|0,000000,11&chxr=1,0,1114.1,100&chm=N,339900,2,-1,10,0|N,FFCC00,3,-1,10,0|N,CC0033,4,-1,10,0&chco=000099,0066FF,339900,FFCC00,CC0033,FF0000&chd=t:835,835,835,838,838,845,845,845,851,851,851,857,857,857,843,841,841,841,832,833,830,830|828,822,820,813,808,828,826,819,816,815,811,817,815,811,807,802,706,708,706,701,72,674|3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,630,0|0,0,0,1,13,0,0,0,3,0,3,6,0,0,6,3,4,0,0,4,1,3|4,13,15,21,14,14,16,23,23,27,28,25,33,37,27,34,23,25,20,23,23,49|0,0,0,3,3,3,3,3,9,9,9,9,9,9,3,2,108,108,106,105,104,104&chdl=Checked|No+Changes|Updated|Back+in+stock|Soldouts|Errors&chdlp=t

  • Mark

    SOLVED!!!
    added
    chds=0,MAX_VALUE_RANGE

  • http://kesav7902.blogspot.com keshav

    how to avoid the chart display errors when i have numeric values graeater than 3 digits or in the case of ‘,’ seperated numeric values.

    Please share the code for the same i am using the xsl code in a share point content editor web part.

  • annoyed_dude

    No negative numbers allowed in the data sets. Bah! Boo! Hiss!

  • http://sustainabilityportal.com.au nick

    hey -

    im trying to link a google spreadsheet (that users can enter data in via a form) to a google chart. Does anyone know if/how/or even if I could reference a google spreadsheet cell from within the URL when calling the chart?

    Cheers,

    N

  • mzee.richo

    Can anyone point me to examples that run live data – from MySQL database and display this.

  • http://devconf.se/ Fredrik Wendt

    Wonderful introduction with perfect amount of detail and cruft (none)!

  • sathish

    Hi
    How can i show the x-axis label marker at end of the each bar (now show the examples are show the labels are at mid of the each bar – pizza, pasta etc). Please help me.
    Now “chxp” Its help to setup the axis position but manually setup. if any automatically setup the axis position

  • http://www.fuseboxgroup.com Bleyder

    The best tutorial I’ve read about Google Charts. Thanks!

  • http://www.basketball-players.org Ivan

    Great tutorial!
    thanx man

  • http://codesleepcode.com codesleepcode

    Paste this method into ChartAxis.cs in the ‘Google Chart Sharp’ wrapper and call it when you need to reverse the axis labels.

    ///
    /// Extended method to correct for the reversal of labels in vertical charts.
    ///
    ///
    ///
    /// true reverses axis labels to accurately match data
    public ChartAxis(ChartAxisType axisType, string[] labels, bool reverse)
    {
    this.axisType = axisType;

    int k = 0;
    for (int i = labels.Length – 1; i >= 0; i–)// i minus minus
    {
    this.axisLabels.Add(new ChartAxisLabel(labels[reverse ? i : k], -1));
    k++;
    }
    }

  • ashish khurana

    Is there any way by which we can put labels on the points inside the graph.
    Thanx

  • http://s viki

    how to change the background color of pie chart of each palets

  • Del

    Is there any way to change the colors / size of the Labels, *specifically in pie charts*? I need the labels to be rendered in something other than light gray (like navy blue), but I can’t find any settings that would allow for that change.

  • CWD

    In your last example I am trying to get data point labels for all three data sets, but when I add the third N,000000,X,X,X it gives me an error. Please see example below.

    =”"

    can anyone help me fix this?

    Thanks

  • http://lifeisfine.ru lifephysic

    Very Useful article. A have realised some insrument for javascript code generation too with the help of QT programm. And now I’m trying to find some online tools based on the same idea. Everything that regards google is simple and useful.

  • Pingback: Datadotgc.ca – A Drupal case study » Blog: Raised Eyebrow Web Studio, Inc.

  • http://www.enigmasistemas.com.br Paulo

    Very good explanation. Thank you so much…

  • chandanr

    how to use add A&B as label ,as it has ‘&’ as a character which means ‘and’.So plz help

  • seenu

    i want api for http post method for all charts, piechart, stacked bar chart, bubble chart, line chart

  • Amit

    How to add stripes as fillers to the vertical bars of Bar Chart?

  • http://rob-smith.info Rob Smith

    Hey I just wanted to say thanks at least a couple of times your examples have enabled me to spot an issue in my code that was driving me nuts. Thanks – damn pipes at the start.

  • Sangi

    Is there a way to tilt the 3D pie chart? make it look more flat?

  • Nasia

    great examples :) you really helped me!

  • gal

    Thank you very much;
    Very helpful!

  • Pingback: 利用 Google Chart API 產生各種統計圖 » ed tech

  • Hilke

    When incorporating the example charts into a kml file (to show in balloon) and importing this kml file into Google Maps, the axis labels don’t show.

    Has anybody experienced this as well or, even better, has anybody got a solution for this?

    Thanks!

  • ANn

    hey can you tell me how can I create a dashed line (- – - -) ?

  • rubel

    how can i add tooltips (mouseover) at

    http://chart.apis.google.com/chart?cht=lc&chs=450×330&chd=t:7,18,11,26,22,11,14&chxr=1,0,30&chds=0,30&chco=4d89f9&chxt=x,y&chxl=0 :| Mon|Tue|Wed|Thu|Fri|Sat|Sun&chls=3,1,0&chm=d,4d89f9,0,0,12,0|d,4d89f9,0,1,12,0|d,4d89f9,0,2,12,0|d,4d89f9,0,3,12,0|d,4d89f9,0,4,12,0|d,4d89f9,0,5,12,0|d,4d89f9,0,6,12,0&chg=0,6.67,5,5

  • http://www.a2ztechguide.com sandeep

    Very nice article. Explained in a easy manner. For all beginners, i would like to suggest one link to get started with Google charts.

    Example on how to use Google Chart API

  • ramesh

    its amazing…few lines of code can generate the graphs. before read this artical i waste 3 days.but this artical save my almost my life. thank you thank you.

  • ramesh

    how to show the percentatge in pie chart iam using this in android

  • http://netsolutionsIndia.com Swati

    Nice tutorial ,even best tutorial for drawing chart in android using Google api.GOOD ONE :-)

  • Abhijit

    Thanks for the beautiful post..As i am new to google chart it helps me a lot.

  • Abhijit

    I have an query like suppose i want to show sales info for 15 days then it is displaying fine in x-axis.if it exceeds that then dates are overlapping.any solutions ‘….

  • Ajay

    Excellent Post..

  • Prash

    hi , good stuff.. any idea how i can read from SQL and then use the result to render the chart ?
    Basically , I would like to use chart or graphs for representing my database detaills

    Thanks for any help

  • zameena hosany

    this will be helpfull

  • JJ Jeng

    Hi

    Is Organization Chart supported in charts4j?

    https://developers.google.com/chart/interactive/docs/gallery/orgchart

    Thank you.

    JJ Jeng

  • http://myzealit.com M.Reddy

    Thanks for the good post.How to create Google Visualization Stacked Vertical Bar Chart with live data. Please provide me the sample code .
    Thanks in advance.

  • Rahul Patel

    Thanks for the great article.
    Can you please tell me how can I change the background color of the Pie chart?

    Thanks.