Monday, March 12, 2012

Google Charts Interactive Graphs

Pic of Google Gallery Graph

“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.

Pic of Google Gallery


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

Example HTML Code


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

Car Park Table

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:

Modified Code


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.

No comments:

Post a Comment