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. 

My Rules of Screencasting

Others have written about how to do screencasts most effectively. Like I said in a previous post, much of it is very useful. I just thought I'd add my own rules that I use when creating screencasts just in case anyone is interested.

1. If it's worth screencasting it's worth sounding interested in it. Try to be enthusiastic without speaking too fast. (I may be guilty from time to time here)

2. Make sure you record the screen at sensible size. I use a window size of 800x600 and I get it to this size by using a great little app called sizer (see below).

3. Always record in Flash for movies of the highest quality and easy distribution over the web.

4. Use a good microphone - I use a Logitech USB mic and the sound is crisp and crackle-free. (My earlier efforts were not so good!)

5. Go easy on the 'special effects'! Don't use the George Mallory approach. Works great for mountains but not for screen capture software.

6. Plan but don't script. Know what you're going to do but not necessarily exactly what you are going to say. (And don't worry about little mistakes - they keep it human - if you are one)

7. Work towards a standard format that your viewers recognise and trust. I find this helps comprehension and makes learning easier.

That's all for now. There's loads of other things I could have included but they are the ones that I think are most important.