Some tips for charts in Fusion Tables info windows

I've recently been working with some mortgage lending data from banks in Great Britain to produce a new mortgage lending maps site. Once again, I've used Google Fusion Tables to map the data because it's relatively quick and easy - further information can be found here. What's not so easy is getting the info windows to do exactly what you want, particularly when you want to include charts of the type shown below. In this post, I explain a little more about how you can get the info window to display such a chart, what can go wrong when trying to do so and what the code underlying code looks like.

The chart shown above is what you'll see when you click on any polygon in my mortgage lending map website. It takes the data from the underlying Fusion Table and provides a unique info window and chart for each postcode sector - in the case of the above it is for the Cardiff postcode sector of CF24 4, which as you can see had more than £117 million of outstanding mortgage debt owed by 839 households at the end of June 2013. The default info windows created in Fusion Table maps simply contain a number of default data records from columns from the underlying table. With this data, I was keen to show a visual comparison of lending mix in each area, and I wanted to do this using a horizontal bar chart. I'd done info window charts before (e.g. in my Deprivation in Scotland website) but these were line graphs showing change over time.

There is some general help on putting charts in info windows from Google, and this is a very good place to start, and you can also find a lot of explanation for what the different bits of chart code mean in Google's Charts Gallery, or in the Chart Feature List, but to help anyone who might be trying something similar to what I've produced, I thought I would provide an annotated code example. I also want to provide some general troubleshooting advice. Here's what the code looks like inside the Fusion Tables interface:

And here is a Word document with comments added explaining what each bit of code does. You'll notice that it's a bit messy but it produces a very nice looking chart. One thing that I noticed about all this is that if you want the numerical data to appear in the info window with comma separators - as above, for the £117 million figure - then it appears to disappear from the chart. This is what happened to me anyway. My advice would be to keep the number format for your data as 'none' in the Fusion Table field options. My other advice would be to remember to save a good version of your code but most of all to experiment with different things and then share the results.

I hope someone finds this useful! I know I would have before I got into this. 

Google Fusion Tables Info Windows

A short post today related to info windows for Google Fusion Tables maps. In case you didn't know, an info window is what pops up when you click on an area of a Google map - as shown below. I've blogged about this in the past and today am sharing some more tips in relation to how to get a Google Street View snapshot of an area to appear in the info window. I just added this in to my new SIMD website.

This page tells you how to add a Street View snapshot and there isn't really much to it. You just need to make sure you have an API console key (baffled? see this for how to get one) which is just a key code that you need to make it work.  All you need to get one is a Google account. The other thing you'll need is two columns in your table specifying a latitude and longitude. I do this in ArcGIS before importing the data into Fusion Tables. Once you've done this you can add in the Street View code to the Fusion Tables info window layout (via Tools, Change info window layout... as below) and then add in the code via the Custom tab.

I've added in an Employment page to my new SIMD site where this is all put into practice - I have an info window chart, some data and a Google Street View snapshot in it, plus some text. Here's the code that makes it work - I'm certainly not a coding expert so apologies if it is a bit messy. If you're into this kind of thing, I hope you find it useful. 

You can change the dimensions from 400x400 to whatever you like. The curly brackets specify which column the lat/long comes from so you will need to make sure that this matches the name of your lat/long columns.

The only downside to this is that the image it displays is fairly random and not always representative of the area people click on. Sometimes, no image is available.

Mapping Methods

I've done a lot of mapping on this blog in recent months. Much of this has been about deprivation and my attempts to make more widely available maps on deprivation for different parts of the UK. For this, I've often used Google's Fusion Tables. The most recent work I've done with this data using Fusion Tables is to update the Welsh Deprivation work to include the most recent release of the Welsh Index of Multiple Deprivation from 2011. There's a screenshot below which links to a full page Google map. If you click on an area the pop-up will tell you all about it in relation to the WIMD data. This post isn't about the data but the most deprived area is in West Rhyl and the least deprived in Cardiff (Llandaff area).

But this post is about methods, so more on that before I go... The steps below relate to any kind of data I've mapped using Fusion Tables (warning: technical content!).

1. First of all I usually have to join attribute data to spatial data. I do this in ArcGIS but it works well in MapInfo too. If you're a MapInfo user and want to follow the steps below, use Universal Translator in MapInfo to convert the file to a Shapefile first.

2. I don't like overly detailed boundaries because of the large file sizes and often this exceeds the Fusion Tables file limit. So, I simplify the boundaries. For this, I use mapshaper, a great online tool. You can also use other GIS methods.

3. Then I use something called shpescape. This is a really great tool because it allows you just to zip your shapefile (i.e. the shp, shx, dbf and prj files) and then upload directly to Fusion Tables without having to convert to KML as an intermediate step.

4. Once there, all you need to do is go to Visualize / Map and then go to work customising things. This includes map colours and what appears in the Info Window pop up when you click an area. I've blogged on the Info Window code bit before.

5. If you want others to see it you must make it public. Just click 'Share' in the top right of the Fusion Table screen.

That's about it. The Info Window code bit takes a while to figure out but you can do so much with it.

Info Windows for Google Maps (from Fusion Tables)

A slightly boring technical post today because from time to time people get in touch to ask technical questions. So, I thought I'd just share a bit of my (limited) knowledge on controlling what appears in a google map info window when you click a map layer using Fusion Tables. Most of this probably applies to non-Fusion Table maps as well. Here's what I'm talking about...

Link directly to this page here.

As you can see from the screenshot above, this info window has a chart (drawn from the Fusion Table which is mapped) an image (a map key) and some text, which also pulls out unique data for each area on the map when you click on it. Since Fusion Tables are relatively new, there isn't an awful lot of information out there on how to do this (at least not info that simpletons like me can understand) so I spent quite a bit of time experimenting with the code behind the info windows. There is some useful information on this page and the pages it links to but when you have your own dataset it can be a bit difficult to grasp.

Not much else to say except that I've copied an image below which shows the code and the info window side by side. If you click on the image it should take you to a PowerPoint file which you can then use to copy the code if you wish. I'm certainly no expert but someone may find this useful!