Add An Awesome, Dynamic Google Chart To Any Wordpress Site

Goals Of This Exercise -

  • Update a WordPress site with awesome, dynamic Google Chart.
  • Dynamically host the data so that anyone who has access to Google Spreadsheets can make changes.

1.  First step.

  • Login to your wordpress website/wp-admin and enter your login and password
  • Go to the Appearance tab on the left hand side, then select Editor.

Wordpress wp-admin navigation element.

Wordpress wp-admin navigation element.

2. On the right hand side of the page, select the header template.

Wordpress templates navigation on the Appearance > Editor page in wp-admin.

Wordpress templates navigation on the Appearance > Editor page in wp-admin.

3.  Scroll down to where the </head> statement is and place the following code right before </head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

4.  Click the "Update File" button.

5.  Now, select "Pages" from the left-side navigation.

Wordpress wp-admin navigation element

Wordpress wp-admin navigation element

6.  Click "Add New" under Pages.

7.  Name the page something meaningful as this is a test.

8.  Above the page edit toolbar is a "Visual" and "HTML"" tab - click the "HTML" tab.

9.  Add the following code to the text box.

<div id="chart_div" style="width: 900px; height: 400px; "></div><script type="text/javascript">
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback(drawChart);
     var sampleTable = [];
     var reportTitle = '';
     jQuery.getJSON( "https://spreadsheets.google.com/feeds/list/0AjskNiVWKcl8dHBvc3Z6ZDd5cmtjbXV2eDVDX0xTRnc/od6/public/values?alt=json",
 function (data) {
    var item = "";
    reportTitle = data.feed.title.$t;
    jQuery.each(data.feed.entry, function(i,entry) {sampleTable.push([entry.gsx$task.$t, parseInt(entry.gsx$hoursperday.$t)]);});             
  });
  function drawChart() {      
      var data = google.visualization.arrayToDataTable(sampleTable);
      var options = {
      title: reportTitle   };
     var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
   chart.draw(data, options);
   }
   </script>

10.  Click "Save Draft."

11.  Open a new tab in your browser and navigate to your Google Drive/Docs account.

12.  Once there, create a new spreadsheet.

Google Drive / Docs create new document page element.

Google Drive / Docs create new document page element.

13.  In cell A1, enter Task

14.  In cell B1, enter Hours Per Day

15.  In column A, goto row 2 and begin entering daily activities

16.  In column B, goto row 2 and begin entering corresponding number of hours spent per activity.

17.  Your Google Spreadsheet could look like the following.

Google Spreadsheet example showing two columns &nbsp;with titles and data.

Google Spreadsheet example showing two columns  with titles and data.

18.  Now, click File > Publish To The Web, and you should see the following.
Google Spreadsheets publish options page element.

Google Spreadsheets publish options page element.

19.  Select the name of the sheet you need to publish.

20.  Make sure the automatically republish when changes are made (every 5 minutes).

21.  Copy and paste the entire link from the last text box to notepad - see below.

Google Spreadsheets URL example.

Google Spreadsheets URL example.

22.  Grab the value after key= up until &single, so the resulting cut and paste should look like the following

0AjskNiVWKcl8dHBvc3Z6ZDd5cmtjbXV2eDVDX0xTRnc

23.  Go back to the tab opened previously in wp-admin, and find the spreadsheet key in the code and replace it with the one in your clipboard.  It’s underlined in red in the image below.

Wordpress HTML view on the New Page screen in wp-admin.

Wordpress HTML view on the New Page screen in wp-admin.

24.  Click the "Save Draft" button, then click the "Preview" button.

Sample Google Pie Chart updated with Google Spreadsheet data.

Sample Google Pie Chart updated with Google Spreadsheet data.

25.  Go back into the Google Spreadsheet and rename the tab from Sheet1 to Daily Activities.

26.  Select File > Republish Now

27.  Go back into your Wordpress page from step 24 and refresh the page.

Sample Google Pie Chart with updated Title

Sample Google Pie Chart with updated Title

That's it.  Enjoy.

Creating an Org Chart with Google Docs

To the land of organizational charts.  Of all the places i've worked over the years, organizational charts were not something I found on a company billboards very often, and when I did, which was rare, it would be grossly out-of-date.  The organizational chart (org chart) is an important business tool that shows who reports to who and displays a level of accountability.   I've learned the hard way, that the org chart is a powerful tool that should be leveraged by everyone, so why did all of these other companies fail to have one?  I think it's because of the dedicated resources needed in order to keep it updated.  

If you have 5 minutes, I can show you how to create, and update an org chart to impress your constituents, business partners, managers, or executive staff, let alone keep yourself well-organized and ready for success.

Open Google Docs, then select New Spreadsheet.

Enter the values in your spreadsheet that are depicted below.

Select Insert Gadget from the toolbar.

 
Add a gadget dialog.

 

Select the diagrams category.

Select the Org Chart by clicking the Add to Spreadsheet button.

Now, select your range.

View the outcome.

It's so simple.  Column A is the position.  Column B is the report-to position for Column A.  It's case sensitive, so be sure to pay attention to the name of positions.

Here's how to add names.  Enter the cell where CEO is named and change it to CEO - Bill Smith

Delete the gadget and re-add it, then select your range again.  I cannot get it to auto-update.

So that's how you can create org charts for your company.  I don't want to hear any excuses since it's so simple with Google Docs.

 

Creating a Management Dashboard Using Google Docs

It's never been easier than now to create a simple management dashboard using the free Google Application Suite.  After setting up some objectives, strategies, and action plans for our fictious company in a Google Doc, I'll show you how to use Google Sites to tie it all together.  Finally, I'll use a Google Spreadsheet to keep track of the data and formulas for all the calculations.  Let's get started.

Go to www.google.com and login.  If you do not have a login, create one using your an email address, and you'll have access to all the tools I using for the article.

Go to docs.google.com and create new spreadsheet.  It will open by default.  First thing is to set a goal.  For our fictious company,  XYZ Corporation, I've set a sales goal of $1.2 million, which is 16.7% higher than last year.  I enter this value in one of the cells in the Google Docs - Spreadsheet.

 
Now we've setup a sales goal, let's add our sales plan to a Google Site.  During your first visit, you'll be asked by Google Sites to setup a site so you'll need to provide a name and template.  I just picked a basic one from the list that was offered at the time this article was written.  I called it Company XYZ Corporation and create a new page called CEO Plan.


The mission, objectives, strategies, and actions plans for acheiving 16.7% growth must be added now.  You might be asking yourself, why am I just now developing the mission, objectives, strategies, and action plans for the current year?  The mission, objectives, strategies, and actions plans must be determined and strategized in the previous year by the decision makers way before the new starts.  If this cannot be acheived in your business, there are greater issues you must deal with.

Here is the mission and the objectives, strategies, and action plans for XYZ Corporation in a Google docs that I am going to cut and paste to the CEO plan page.



Next step is to setup a spreadsheet to track sales.  Go back to the spreadsheet you used to set the sales goal, open it, go to a new tab.  Here's a very basic, scaled-down version of my sales spreadsheet.  I'm tracking the instore and online sales separately and adding one line per date and a total column.  
 

 
Now, I need a spreadsheet to track customers.



Now that we have the goal I going to transfer the mission, objectives, strategies, and action plans to the new Google Sites page.  Next to the objectives, I've added color-coded bullet points that I can click on to see the detailed spreadsheet graph of what's going on with each strategy and action plan.

 

I've setup a new page for Objective 1 and Objective 2 and linked to yellow and red bullet points to these pages.  Clicking on the yellow ball takes me to the first objective page.  I've created a chart in Google Docs Spreadsheets, and published the chart which produces an image tag that I can embed into the html of the Google Sites objective one page.

 

The final page appears like this.

 

As the Google Docs Spreadsheets continue to update, so does this image, dynamically.

Now that's a management dashboard that works.  All built using open tools and ideas easily found on the Internet.