Introduction: Using Google Visualizations in Google Sites
Alright, I'm going to have to grill Google for being so thick as to block their own product...
BUT HOW COULD YOU DO SUCH A THING GOOGLE???
Anyways, Google Visualizations is a great way to make pretty, official, and interactive charts.
However, Google Sites has no easy way (that I have seen) of embedding their charts into their sites.
Step 1: Creating a Chart
First, we need a chart to do so...
Once you have the desired code, create a new HTML document (using notepad or notepad++) and copy the HTML code into the text editor.
Save as an HTML (*.htm, or *.html, it really doesn't matter)
Step 2: Creating a Google Site
Alright, now you need something to put this chart in!
I particularly like Google sites because:
1. It's Free
2. It's Easy
3. It make website noobs like me look good with professional looking websites
You need a Google Account to do this (don't worry! it's really easy to sign up!)
Sign In, or create an Account at sites.google.com
Now, create a new site once you're signed in and everything
Fill out the necessary information to create the type of site you want
Step 3: Hosting Your HTML Doc With the Chart
Now comes the round-a-bout way to host this chart on your Google Site
We need to find another website creator that can host HTML doc and permits viewing of such documents without downloading them (that is the sole reason Google Sites CANNOT be used for this step, because they do not permit the viewing of "unrecognized file types" a.k.a. anything besides pictures and office documents (*.doc, *.xls, etc...)
I use WebStarts to do this
Yeah, they send some annoying emails saying they will give you funding for advertising, but you can just apply a filter to prevent your discomfort of such emails
Once again, you need to sign up for this and create another site.
Once you've done that, you need to upload your HTML doc to the new (webstarts) website
After you've attached the document, you need to find the URL of the attached HTML
The URL should look something like: http://googlesitesloop.webstarts.com/uploads/test.html
Credit to Google for the example chart
Of course, your URL will be a little different depending on the name of your document, and domain of your webstarts website.
Step 4: Placing the Chart in Your Google Sites
Now, don't freak out...
We are going to do some HTML editing in Google Sites...
Don't worry, I'll help.
So! Now go back to the Google Site you created earlier.
Go to the desired page for the chart
Hit "Edit" (you need to be signed in for this)
Select the field you wish to place the chart in.
Click the little "HTML" button
Add the following code (and adjust to your needs)
<iframe src="http://googlesitesloop.webstarts.com/uploads/test.html" width=300px height=300px>
Once the "gadget" is added to your site, you can use the Google Sites easy config stuff to adjust settings for the "gadget" by clicking on it, and hitting "Properties"
Step 5: Save Your Work and View
Alright, you're now almost done!
Just save, and if you desire click "More Actions -> Preview as Viewer"