RSSIntegrating Flash Graphs for Real Estate in WordPress or other Platforms
By Ryan Ward | December 18, 2008
Adding charts to blog posts and websites isn’t exactly new for real estate agents, but, adding slick charts like the one below will not only help convey you as a technology expert in your market, but, will also let your readers see the information more clearly with the flash maps. They are actually pretty easy to create.
Real Estate Statistics
Another example is here where I have put together some numbers and added them in to my new Atlanta real estate market statistics page on my website. There are lots of available flash graphs - some are free, some you pay for and some have free and paid versions. I’ve been playing around with several different ones for a while before I decided to use the ones that I am using, FusionCharts. Check out their free flash charts and there is lots of documentation to go along with them, but, it is much more information than we need to put together some great looking graphs for real estate so I’ll summarize here.
Let’s Get Started
To get going, you need FTP access. Download this file to your computer and unzip it. Create a folder in your root directory named “FusionCharts” and a subfolder named “FusionCharts” to hold all of your swf files. Upload the swf files (found in the “Charts” folder) to your FusionCharts subfolder of FusionCharts. Create another folder under the main FusionCharts folder and name it “Data”. Upload Data.xml to your “Data” folder and you have everything you need to replicate this chart. Your “Data” folder is where you will upload all of your XML files. Do not be scared because I said XML!
Pulling it all together
What you have now is a FusionCharts folder, a subfolder with all of the swf files and a seperate data folder containing your XML files. Your next concern will be only that you make sure that the path to these files is correct because all you need to do now is copy and paste this into a post:
1 2 3 4 5 6 7 | <div width="520">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="500" id="Column3D" >
<param name="movie" value="/FusionCharts/FusionCharts/FCF_Column3D.swf" />
<param name="FlashVars" value="&dataURL=/FusionCharts/Data/Data.xml&chartWidth=500&chartHeight=500">
<param name="quality" value="high" />
<embed src="/FusionCharts/FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=/FusionCharts//Data/Data.xml&chartWidth=500&chartHeight=500" quality="high" width="500" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</OBJECT></div> |
So, your variables here are the .swf chart style that you want and the data (XML file) you want to use to pull your data from into the chart. Check out your different chart styles by opening the folder on your computer “Charts” and click on the files to see the different options you have available for styles and types and don’t forget to read the documentation here for more complex graphs. Also check your Contents/ChartSS folder for examples with XML data that you can save as your XML file and alter as necessary for your purpose. The only other thing that I had to do to make this work in both Internet Explorer and Firefox was to place the chart inside a “div” container. That’s really about it to get started. If you play around with it, let me know what you think and post a link in the comments.
Category: Marketing, Testing |
December 18th, 2008 at 1:38 am
Hi!
have you seen AnyChart http://www.anychart.com ? email me if you’re interested in free license.
December 18th, 2008 at 2:29 am
Ryan,
The charts are not loading in Firefox because your EMBED tag has wrongly specified dataURL.
All the best,
Ravi
December 18th, 2008 at 8:05 am
Thanks Ravi, sometimes you have to put the computer down and go to bed. It’s working now…
December 18th, 2008 at 9:56 am
Yes - it works now!
December 18th, 2008 at 10:16 am
BTW Anton, those are some nice charts….
December 18th, 2008 at 10:20 am
Do you mean http://www.anychart.com? email me if you’re interested in free license.
December 21st, 2008 at 12:24 pm
I wonder why it does not display correctly under Firefox 3.0.4 on my Mac.
December 21st, 2008 at 11:29 pm
I’m not sure. Do you not have flash support?
December 21st, 2008 at 11:30 pm
It doesn’t appear to show up on my iPhone on Safari either…
December 21st, 2008 at 11:33 pm
to Madtown RM: Could you please test AnyChart under FF 3.0.4 on your Mac?
http://www.anychart.com/products/anychart/overview/
December 21st, 2008 at 11:43 pm
The anychart home page displays nicely on my FF 3.0.4 Mac. Ryan’s blog page displays correctly on my laptop running Windows Vista but not on my Mac.
I’m also wondering what the reference to FTP is in Ryan’s post re FusionCharts. Do we have to FTP files to get FusionCharts to work on our REW site?
December 21st, 2008 at 11:45 pm
Thank you for your test!
December 21st, 2008 at 11:55 pm
Ryan,
Safari on iPhone doesn’t support flash, but it should work on Mac.
December 22nd, 2008 at 5:51 am
Madtown,
We don’t have FTP for REW. You have to put them on another domain and make sure the path to the files is correct - it should work.
Can someone check to see if they are working on a Mac on this page: http://www.ryanwardrealestate.com/atlanta-real-estate-market-statistics.php ? If can’t get these to work on Mac, I may try to see if anycharts work. They really are nice. I would just hate to spend more time on more charts if it isn’t necessary.
December 22nd, 2008 at 9:08 pm
AnyCharts is not free though (I don’t think) whereas FusionCharts Free are…
December 23rd, 2008 at 12:18 am
Okay, so I got the chart working here:
http://jolenta.com/chart.htm
But how do I “pull” that information into my dev site?
Is there an HTML or PHP command line similar to embed? I don’t want to use a bog-standard hyperlink - I want the content to show up automatically.
December 23rd, 2008 at 8:06 am
What you will need to try to do is to use the code that you are using to make the charts work and change the path in the URL’s to match the other site. I don’t think the full code will work in a comment, your url’s should look likew this:
amp;dataURL= you may need (http://)www.jolenta.com/FusionCharts/Data/Data.xml&chartWidth=500&chartHeight=500
embed src=”http://www.jolenta.com/FusionCharts/FusionCharts/FCF_Column3D.swf
To reuse this chart in your site with the correct data, just edit the XML file to the data you need.
See if that works. Basically, you just need to make sure that the path is correct to the url’s that it needs to pull the information from…
December 23rd, 2008 at 8:08 am
Oh, and then for your dev site, you may create a test page (add new page), test.php and check the box to hide the page. Go into html mode and paste the code or if that doesn’t work, you might try to create a snippet and use the snippet on the test page.
December 23rd, 2008 at 9:13 am
I tried creating the test page yesterday (also a snippet) but neither worked. I’ll try it again and see if anything changes.
December 23rd, 2008 at 9:23 am
It says error loading code.
February 9th, 2009 at 9:23 am
Hey Ryan, you inspired me with this post and I beat my head against a wall until I figured it out. Actually, it wasn’t that bad thanks to this post! Thanks, you rock. I still have some cleaning up to do, but I have made a stab at it here: http://www.reddoorindy.com/indianapolis-real-estate-statistics.php . Let me know what you think.
February 13th, 2009 at 4:03 pm
oops! for that second link i meant:
http://www.lakeandcityhomes.com/market-data.php
May 6th, 2009 at 11:30 am
Ryan,
You continue to provide great information both for real estate agents and your customers as well.
Thanks for posting this, I’ve put Jessie to work building something for my site now as well:
http://www.jennifermackay.com/marketsummary.php
Btw, Jessie has made these work on the REW site if you’d like to know how contact him directly. You do not need FTP access. He did it in snippets and works great.
Keep up the great work.
May 8th, 2009 at 6:19 pm
Hi Ryan,
I found my way here thru another blog post referencing this article on graphs. I am very much a visual person myself and have to tell you, I think these graphs are super cool! This is an excellent way to represent information that is interesting and easy for all to understand. I may give it a shot, but I do get nervous that I’ll make a mess somehow. Mike, your graphs look great too…good job.