You are here: GeekEstate Blog » API's, Websites, Wordpress » Using Google Chart to Make Real Estate Charts

Using Google Chart to Make Real Estate Charts

Numbers don’t lie. Google Charts is an invaluable tool to display real estate trends that will help buyers gain market specific knowledge and information. With Google Charts it is easier than ever to show home value charts and graphs for your featured listings, neighborhoods, or condominium complexes.  Most likely, if you have an active real estate license, you will have access to your local area’s MLS or local listing data.  Typically with these MLS services, you can generate a plethora of different real estate reports. Using Google Charts you can turn your reports into polished graphs that let your buyers know that you fundamentally understand the local market.  You could take the time and create something very similar in Microsoft Excel or iWork Numbers, and then create an image from the generated graph, and then finally add the image to your website.  But, with Google Charts it is easier to create and add graphs to your website, you can easily update the charts, and the charts are interactive.  For many reasons, Google Charts can improve your website and your visitor’s/client’s experience.

Here is how to create your own Google Chart for your WordPress website. You can learn more about Google Charts at https://developers.google.com/chart/. The example below is completed on WordPress 3.4.0, but should work the same on other recent installations, and uses code from https://developers.Google.com/chart/.

Make sure you have administrative access to you WordPress website because you will need to modify or install the following items:

  1. Header.php
  2. Install custom fields plugin
  3. Modify the page where you want to display the graph

First to modify your header.php file to allow your WordPress pages use Google JavaScript library to make charts.  Login to your site with admin credentials. There are a couple of ways to modify your header.php.  Some WordPress themes allow you to add scripts and code to your header.php file under theme setting.  That solution will work as well. The example shown below is a bit more technical and shows you how to edit the actual code of the header.php file.

Click on “Appearance” button on the side bar and then “Editor” on the slide out menu.

Next you will see the WordPress editor screen.

Wordpress editor google charts

Wordpress Editor

Under the Template column on the right hand side of the window find the header.php template and click on it.

Once you click on the Header.php file your main edit window will display the code for header.php file. (NOTE: be careful this is the actual code that runs your WordPress site, edit carefully!) Scroll down in your header.php file until you see the following code.

?>
</head>

now add:

<script type=”text/javascript” src=”http://www.google.com/jsapi“></script>

directly after ?> but before the closing head tag .  The final code mark up should look like this.

?>
<script type=”text/javascript” src=”http://www.google.com/jsapi“></script>
</head>

Once you have added the code click the “Update File” button.

Great! You are done editing the header.php file. next add the Custom fields shortcode plugin.

Install the Custom fields shortcode

Install the Custom fields shortcode plugin by going to Plugins and “Add New”.  Simply type custom fields shortcode into the search box and click “Search Plugins”.  Once you find Custom fields shortcode, click and install the plugin. You can learn more about the Custom fields shortcode at http://wordpress.org/extend/plugins/custom-fields-shortcode/. There are several plugins that allow to add custom fields to your WordPress posts and pages, however, I have found Custom fields shortcode is the simplest and easiest to use.

Building a simple line graph.

Once you have the above steps completed you are ready to add the JavaScript code to your individual WordPress page where you wish to display your new chart. Login to your WordPress website and then browse to the page in which you would like to add the chart.  Click edit page. Once you are on the Edit Page, make sure that custom fields are showing. Check this by clicking on “Screen Options” in the top right hand corner of the Edit Page.  A drop down menu will appear. Make sure that the “Custom Fields” box is checked.

You are ready to add the JavaScript for the Google Chart. Scroll down to the Edit Page until you get to the Custom Fields box.  If you currently do not have any Custom Fields the box will look similar to the image below.

WordPress Custom Fields

WordPress Custom Fields

Click “Enter new” to add a new custom field. Once you click “Enter new” the text box directly above “Enter new” will allow you to enter the name of your new custom field. I have named the chart “googlechart1”. Next you need to add a value for your chart, this is where you will actually add the JavaScript code.

If you are not a coder (most of us are not), then you can simply cut and paste the JavaScript below into the value field.  Then change the data points and information to correspond with your data.  Helpful hints in red have been added to the JavaScript so you have a better idea of what to change.

<script type=”text/javascript”>
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
[‘x’, ‘Homes Average Sale Price ($)’, ‘Condo Average Sale Price($)’], //Chart Legend 
[‘1997’, 277576, 218935], // Data points for your chart
[‘1998’, 302475, 327570],
[‘1999’, 374169, 284297],
[‘2000’, 429055, 333459],
[‘2001’, 503034, 375045],
[‘2002’, 585229, 376199],
[‘2003’, 622103, 412710],
[‘2004’, 925685, 530441],
[‘2005’, 1147527, 796114],
[‘2006’, 1095417, 799826],
[‘2007’, 997607, 704774],
[‘2008’, 859584, 698588],
[‘2009’, 712001, 522768],
[‘2010’, 623716, 439929],
[‘2011’, 666701, 433564],
[‘*2012’, 732687, 432269]
]);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById(‘visualization2’)).
draw(data, {curveType: “function”,
title:”This is your Chart title”, //Chart Title 
width: 550, height: 300, //Chart Size
// Vertical axis Label
vAxis: {maxValue: 10, title:”Average Sale Price ($)”},
hAxis: {title: “Year”}, // Horizontal axis Label

colors: [‘#0033cc’,’#669900′] //hexadecimal code for chart colors

}
);
}

google.setOnLoadCallback(drawVisualization);
</script>

<div id=”visualization2″ style=”width: 500px; height: 400px;”></div>

Once you have entered your data and appropriately labeled the chart click the “Add Custom Field” button.

Your chart has been saved and now it is time to add it to your page.  You should remain on the Edit Page, and scroll up to the edit window which allows you to add text and pictures to the page you are editing. Find the location where you want the chart to display, and type the following: (which is really a WordPress short code for the custom field you created)

[cf]googlechart1[/cf]

You will recognize that “googlechart1” is what we called the custom field we created and the [cf] stand for custom field. Your chart is complete. Click the “Update” button and view your page.

If everything went well your chart should look like the chart below.  Happy charting! If you have a questions or improvements let me know.

Google Chart real estate trend

Using a Google Chart to show a real estate trend

 

 

About Bryan Bartels

Bryan moonlights as a Realtor with Independent Brokers Realty specializing in Marco Island real estate. Bryan is a nonprofit attorney at Nonrpofitfoundry.com.

This entry was posted in API's, Websites, Wordpress and tagged . Bookmark the permalink.
  • Very cool, I’ve been contimplating creating some database driven stats for my commmunity pages for awhile. I will definately add a graphing component as well, once I get to it. Thanks for Sharing

2008 - 2017 GEEK ESTATE · ALL RIGHTS RESERVED - THEME BY Virtual Results
Hosted by Caffeine Interactive