How to Make a Bar Chart for Your Blog

API Google Chart

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 &amp; reference in place of an ampersand (&).

<img src=”http://chart.apis.google.com/chart?
chs=300×100
&amp;cht=bhs
&amp;chco=4D89F9,C6D9FD
&amp;chd=t:7000|10000
&amp;chds=0,10000
&amp;chxt=x
&amp;chxl=0:|0|$7000|$10000
&amp;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 thoughts on “How to Make a Bar Chart for Your Blog”

  1. Lydia aka Ms. MoneyChat

    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.

  2. admin

    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

    1. admin

      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.

  4. Saving Savy Pinkey

    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.

    1. admin

      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.

  5. Penny

    Thanks, this is very helpful. How do I add the bar chart to the sidebar of my blog?

Comments are closed.