How to Make a Skills Objective Gauge Gadget

In this post I show you how to make a simple gauge like the one here using Google Docs. I use these gauges for tracking my progress toward the skills objectives associated with the 13Skills site.

This is really a simple gadget to make if you have a Google account. If you don't have a Google account, you can set one up for free here.

A Google Account lets you access a variety of Google products such as Gmail, Google+, YouTube, and Google Docs. You need a Google account to use the free Google Docs. You need Google Docs to make this simple gadget.

If you already have a Google account then here is what you do.

1. Sign in and open your Google docs page by left clicking on "Drive" on the upper menu.
2. Click on the button "create" and a drop down menu will appear. Left click to select spreadsheet. A blank spreadsheet will open. Left click in the upper left side where it says "Untitled spreadsheet" and give it a name, like Writing Progress.
3. Add a short name in cell A1. (Spreadsheet cells are labeled across the top by letters, and down the side by numbers. The intersection of cell column A, and row 1 is cell A1.) The cell A1 name will appear on your gadget later.
4. Write a number in cell B1 indicating the progress toward your objective to date. For example, this is my sixth blog post so I wrote in number 6. Now left click your mouse in cell A1 and drag your mouse across to B1 so that both cells are highlighted. Now you are ready for the fun part.
5. Click on the chart icon. (You should see it across the top of the first row, probably around the letter E. It looks like a little bar graph chart.) A chart editor menu will pop up.
6. You should see a three word menu. Pick the middle one, "Charts" and click on it. Go down to the "more" tab and click on it. You will see four charts, including the gauge chart at the top. Click on the gauge chart. You should see an uncustomized gauge displayed in the editor.
7. Select "customize" in the chart editor top menu. Now set the gauge range. What is your numeric objective? I want to write 130 posts so I set my range 0 to 130. Next, divide the top number by three and round off. For me that is about 43. The bottom range (red) is 0 to 43. The middle range (yellow) is 43 to 86. The top range (green) is 86 to 130. Hit return and your gauge is displayed in the spreadsheet. 

The gauge is interactive.  Whenever you finish an objective, enter the spreadsheet and add to the B1 cell. The gauge will move upwards as you move toward your objective.   If you want to publish the interactive gauge on a blog, website, or forum message, you need to make the spreadsheet public and then copy some code into the page. Here's how.

1. Look for the blue "Share" button at the top right above the spreadsheet.   Left click.  A "sharing settings" menu will pop up. 
2. Under the "who has access" section, left click on change.  Select the button, "Public on the web" and then left click "save."
3. Now go back into the spreadsheet and left click on the chart.  You will see a little arrow at the top right corner of the chart box. 
4. Left click on that arrow and select "publish chart." 
5. Copy the html code shown (I use Ctrl-c) and paste it to your post, page, or message (Ctrl-v). 
6. Make sure you set the Compose/HTML button on your blogger post screen to HTML before you paste the code. (If you don't like the HTML screen, you can switch it back to Compose as soon as you save the post.)

NOTE: You need to be in the HTML editor mode on your email, blog, or forum message when you paste the code.

The interactive chart will now automatically change the gauge on the post, page, or message every time you update your progress cell B of the Google Docs spreadsheet.  Just select publish when you update the spreadsheet, and press the "done" button.  (This interaction is not instantaneous. It may take a moment for the Internet to update).  To access the spreadsheet, just go to your Google Docs Drive, and open the sheet you need to update.
To change the size of the Gauge, you have to edit the code.  Toward the end of all the code gobbleteegook, do you see "width": 600, "height":375}?  Change those numbers to "width":300,"height":187}.  That makes your gauge half the size Google Docs automatically creates it.
You could create an image from your Google Doc gauge.  It would not be interactive, but you could embed it into a forum message using the insert image button on the far left of the bottom row above.  Here's how to do this on the Survival Podcast forums: 
1) Go into the Gauge and click on the little arrow at the top right.  You should see an option "save image" just above "publish chart".  Save the image to your desktop or somewhere you can find it later.   2) Upload it to the Internet on a photograph hosting site or blog.   3) Make the picture public. 4) If you use Chrome, you can copy the url for the photograph by right-clicking it and selecting "copy image url."   5) Come back here and select the picture icon on the botton left row of buttons for a message.   6) Past the image url between the  code marks (Ctrl-V) so it will appear on a posts to the forum:
The message code looks like this:

[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBS2JqINm532TA-UuGz2x_aaptf50HMs_MzRz8eA2T6ACwhCjzgv9tomKjPMZU4l02ppiL6xsbAiL0dobCum9ftcgXzwmnJf08Xj9fI7sT_4ltQiFh7GR5XVggDAiAKy8kF0BzmcHEI4/h120/chart_2.png[/img]