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:
Define the Chart’s size:
Define the Chart type:
*bhs defines bar chart, horizontal
Define the colors:
Define colors using html’s rrggbb code, found here.
Map the Chart’s Data:
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:
In this case we are representing $0 to $10,000
Add labels on the x-axis:
Define x-axis labels:
Add a title:
So now your URL should look like this:
When you embed a URL in an HTML IMG tag, take care to use the character entity & reference in place of an ampersand (&).
*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.