Google tools have proved yet another time that how powerful and easy to use they are: after trying several different open source javascript chat tools, I found Google has a library called Google Charts, which can be easily modified and integrated to your own html.

Follow instruction on this page to get a quick start and build upon your own charts.

One notable point is that Google chat’s bar charts are all horizontal. If you want to create vertical bar charts, then you will want to choose “column charts” instead of “bar charts.”

Another small thing that is probably common sense for programmers but may not be known for people like me is that: be careful to include special symbols such as the single quotation mark ‘  in your text area when you create the chart. Javascript would consider things after it being non-texts therefore won’t render the chart. For example, this chunk of code will stop the chart from rendering:

var options = {'title':'Rui's First Google Chart',
                       'width':400,
                       'height':300};

While this would be fine:

var options = {'title':'My First Google Chart',
                       'width':400,
                       'height':300};