How to create a graph using Google charts api?

March 18th, 2009

If you have ever tried to create a web chart/graph for a website. More likely knows there are several different ways to do charts and graphs. Some of my favourite solutions are Open source chart, YUI Charts or jQuery flot. All the above solutions have their own strength and weaknesses. But one of my favourite for quick and easy one of Charting, is the Google chart api. It does take a bit of time to understand the parameters. But once you understand them you will be knocking them into your web projects.

The tutorial is going to create a simple pie chart, the benefit of Google charts api is that you can create a chart in a matter in minutes.

Step 1

We are going to begin by creating a simple pie chart First create the structure of the page

<body>
<div id=”container”>
<h1>Using Google charts api to create graphs</h1>
</div>
</body>

Step 2

Now create a standard image tag

<body>
<div id=”container”>
<h1>Using Google charts api to create graphs</h1>
<img src=”http://chart.apis.google.com/chart?” alt=”Top Tv Show”/>
</div>
</body>

The src tag needs to point to http://chart.apis.google.com/chart?

Step 3

State the size of the chart

<body>
<div id=”container”>
<h1>Using Google charts api to create graphs</h1>
<img src=”http://chart.apis.google.com/chart?chs=600×300″ alt=”Top Tv Show”/>
</div>
</body>

Chs states the size of the chart at the x and y axis

Step 4

<body>
<div id=”container”>
<h1>Using Google charts api to create graphs</h1>
<img src=”http://chart.apis.google.com/chart?chs=600×300&cht=p3″ alt=”Top Tv Show”/>
</div>
</body>

In this example I will be plotting a 3d pie chart if you wanted a 2d pie chart replace cht=p3 with cht=p.

Step 5

Enter the values for the chart

The chd=t:10,40,30,5,15, This is the data chart data string. The values represent each slice in the chart. In this case 10,40,30,5,15

Step 6

Label your chart

<body>
<div id=”container”>
<h1>Using Google charts api to create graphs</h1>
<img src=”http://chart.apis.google.com/chart?chs=600×300&cht=p3&chd=t:10,40,30,5,15&chl=Dexter|Lost|Supernatural|24|Smallville” alt=”Top Tv Show”/>
</div>
</body>

Each of label use the pipe separator for each pie slice

Step 7

Set a title for the chart

Using the chht parameter spaces are represented by + and line breaks are represented by pipes |

Step 8

Set the colours of the slices

The colours are stated in Hex

Summary

I personally think Google charts is a great quick way of knocking out charts. It does have it weakness but the api does allow you to create charts without being concerned if the user as certain version of flash installed or if they have JavaScript enabled.

The new Google Charts API is a powerful method for creating charts and graphs of all types. If you apply a little bit of technical skill you can create pie charts, bar graphs, and even spark lines as and when you need them. Now you’ve finished ready the article I hope you waste no more time: go forth and chart!

Related Sites