Google Charts Interactive Graphs

“Google Chart Tools” makes very nice interactive mouse-over graphs for web pages.

Click the link below to access it.

http://code.google.com/apis/chart/interactive/docs/gallery.html

It is easiest to use the Gallery designs, and the HTML code can modified, and then cut and pasted into your website pages or Google Blogger directly. It should run the HTML and Javascript okay, and we get a really nice interactive graph that we can mouse over.




Here is the HTML code for the example Pie Chart in the Google Gallery:




We want to modify the above chart to do results for our Car Colours in the Car Park Survey, which has this data:



All we have to do is mouse select highlight copy the HTML code out of the Gallery, and paste it into a text editor such as Notepad, and edit it up like this:




Because we were not doing a full stand alone web page, we then further edited the above code to remove the HTML, body, and Head beginning and end Tags, before we put it into the bottom section of this blog post.

We then take this code and copy and paste it into a web page or Google Blogger post, and we will have our mouse over interactive graph.

Eg. Try mousing all over the graph below and observe what happens.

Note that we can only put one graph on a web page or Blog Post.

If we wanted more graphs on a blog post or page, we would probably need to build each one on its own separate page and then iframe onto each one.

Enjoy,
Big Passy Wasabi.