Just one of the many cool charts you can create with Google Chart API
Do you every wonder how to get those cool bar graphs to mark your financial progress?
Well, Google Chart API lets you ‘dynamically generate charts’ by returning a PNG-format image in response to a URL. Once you get the hang of it, you’ll realize it couldn’t be more simple!
In this example, we will create a bar chart representing my imaginary savings account marked against my goal. 
This technical mumbo jumbo only looks scarier than it really is. Trust me. Give it a try.
To Make Your Own Chart
Define URL with Chart API’s location:
http://chart.apis.google.com/chart?
Define the Chart’s size:
chs=500×120
Define the Chart type:
&cht=bhs
*bhs defines bar chart, horizontal
Define the colors:
&chco=4D89F9,C6D9FD
Define colors using html’s rrggbb code, found here.
Map the Chart’s Data:
&chd=t:7000|10000
7000 representing $7,000 against $10,000. Change to your own defined values. The (|) symbol found under your backspace key on the keyboard (shift + \ = |)
Define the value range:
&chds=0,10000
In this case we are representing $0 to $10,000
Add labels on the x-axis:
&chxt=x
Define x-axis labels:
&chxl=0:|0|7000|10000
Add a title:
&chtt=Money+in+my+Savings|Nov 2009
So now your URL should look like this:
<”http://chart.apis.google.com/chart?
chs=300×100
&cht=bhs
&chco=4D89F9,C6D9FD
&chd=t:7000|10000
&chds=0,10000
&chxt=x
&chxl=0:|0|$7000|$10000
&chtt=Money+in+my+Savings|Nov 2009″/>
When you embed a URL in an HTML IMG tag, take care to use the character entity & reference in place of an ampersand (&).
<img src=”http://chart.apis.google.com/chart?
chs=300×100
&cht=bhs
&chco=4D89F9,C6D9FD
&chd=t:7000|10000
&chds=0,10000
&chxt=x
&chxl=0:|0|$7000|$10000
&chtt=Money+in+my+Savings|Nov 2009/”>
*post as one line straight across
If it works properly, it should look like this:
Try it for yourself. Copy and paste this URL into the address bar and hit enter:
If you’d like to discover a wider range of groovy choices or to find other types of charts, visit Google Chart API development tool site.
{ 8 comments… read them below or add one }
oh gosh, you lost me at hello. LOL. i still need to learn how to:
1. find pictures,
2. upload pictures, and
3. upload spreadsheet files
yeah, there’s still so much i need to learn.
I updated the post to give you a URL for you to copy and paste yourself in to the address bar; to give you a feel for how it works. You can tweek the numbers and colors, etc… and make it personal to you. Really, I think you could do it.
Find pics, try Flickr, but make sure to credit the photographer.
The other stuff is all dependable upon your service company. Time and effort… you can do.
The geeky side of my just had to… well, be geeky. LOL
okay stupid question coming…
where do I paste this…what is the address bar?
There are no stupid questions.
The address bar is where you type the URL (http://) to get to your designated site. If you want to get to ur site you would type your blogger (http://musings...) Into the bar on the top of you internet window.
I hope it helps. If not, please let me know.
So, does that mean I can use only one variable value? I mean in the example, 7000/10000. But what if I want to represent different goals and their current position. e.g. 4000/5000, 450/500 and 20/200. I want all these value in a single chart. Then how should I map all this data?
Apologize if its very simple, but I did not get that.
No, if you check out Google’s API site you can see there are many more things you can do with the charts.
If you wanted multiple bar codes reflecting different goals you could write do this with adding the values seperated by a comma. As an example:
&chd=t:7000,8000,9000|10000,10000,10000
&chds=0,10000
This is making it for 3 bar graphs: 7000/10000, 8000/10000, and 9000/10000
ad any value you want (20/200)
and then update this chxl field to properly represent you graph. If it was 20/200 you might want to say:
&chxl=0:|0|$50|$100|$150|$200
seperated by the (|) symbol. I hope this someone helps. I know it is a bit techie. But when you finally get the hang of creating one you will see that it can be easy.
Thanks, this is very helpful. How do I add the bar chart to the sidebar of my blog?
Hi Penny,
Copy your code and add it inside a text widget.
Jessie’s money has a great code for tracking bars, too. If you have wordpress, the same text widget applies.