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

If you have no experience with JavaScripting, or Google Visualizations, I suggest going to the Google Code Playground

http://code.google.com/apis/ajax/playground/?type=visualization

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

www.webstarts.com

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.

NOW

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>

Done!

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"