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.
2. On the right hand side of the page, select the header template.
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
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.
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 with titles and data.
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.
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.
24. Click the "Save Draft" button, then click the "Preview" button.
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
That's it. Enjoy.
