How to build charts in your Google Fusion Tables info-window

Google Fusion Table chart

How a chart in a Google Fusion Table map looks

Interactive maps are often the go-to tool for data journalists wanting to provide readers with a visual aid to make sense of a story.

For reasons largely associated with the way it is collected and distributed, data is generally available by region – whether electoral ward, constituency, local authority, country – and the list goes on. This makes for visualising it using maps ideal, giving people a sense of how their own area is doing relative to other areas of their town, other cities, regions or countries.

Furthermore, with data published regularly in a consistent format, which tends to be the case in national government data releases such as that published by the UK’s Office for National Statistics, creating maps in a tool like Google Fusion Tables for example, is relatively straightforward once you get the hang of it.

But sometimes a simple choropleth map (a tutorial on how to do this here) on its own as a way of visualising data may lack analysis or context.

One way to introduce more insight into your interactive map is by adding charts in the info-window box, showing another layer of analysis.

During a recent data journalism class, our lecturer John Burn-Murdoch went through an example and gave us a few lines of the ‘code’ you need to put into the custom fusion table info-window as a starting point from a previous example.

This allowed us to adapt this to our own examples, which I used it to make the map to accompany this story on the levels of young female graduates in the EU.

Clicking on each country will bring up a column chart showing how the rate of female graduate compares to male ones.

google fusion table map with chart

How to make charts appear in the info-window

Essentially, this works by drawing data from your fusion table and the Google Charts API, displaying a bespoke chart for each region when you click on it. It all depends on the chart parameters you input and what data you ‘ask’ it to display.

To try it out, when you merge your KML fusion table with the table containing your data and make the necessary adjustments to how you want to visualise your map, then click on ‘Change info window’ in the left side of your screen in your configure map options.

configure Google Fusion table info-window

After that, you need to click custom in the box that pops up, which in turn allows you to erase the automated content of the info-window and paste in your own, or as in this case, an example from a previous map which you can then adapt to fit your own.

Below, I have pasted the ‘code’ from my map for you to modify to fit your map.

I will proceed to go through each of the elements.

Therefore, I am starting from the end to guide you through how to adapt it to your own map.

<div class=’googft-info-window’>

<style=”font-family: sans-serif”>EU Tertiary education attainment, 2012<br><font size=”+2″><font color=”#980043″>{Country}</font></font><br><p><br><img src=”http://chart.apis.google.com/chart?

chxt=x,y

&chxr=1,0,60

&chds=0,60

&chbh=a&chs=310×150

&cht=bvg&chco=980043

&chd=t:{% of women aged 30 to 34 with a degree},{% of men aged 30 to 34 with a degree}

&chtt={difference in rate between women and men}%+difference+between+women+and+men

&chxl=0:|Women|Men|

“></p>

Title and appearance:

<div class=’googft-info-window’>

<style=”font-family: sans-serif”>EU Tertiary education attainment, 2012<br><font size=”+2″><font color=”#980043″>{Country}</font></font><br><p><br><img src=”http://chart.apis.google.com/chart?

So, this part dictates the appearance of your chart, from the font to the title which is “EU Tertiary education attainment, 2012”, to the size of the title, colour of text and what is displayed at the top.

The thing to remember is that anything in curly brackets is a value from the fusion table and changes according to what country you click on. google fusion table customising info-window

So in this case, with {Country}, each time you click on a specific country, it will display the name of that country. The same applies every time the curly brackets are used and it is especially important further down when it is drawing on values in your columns.

A <br> tag indicates a linebreak, while <p> is a paragraph tag.

After that, the rest of the information will determine the type and features of your chart.

Chart Type

Cht for example denotes your chart type. What comes after cht= will determine what type of chart it will be. Bvg is a simple column chart, while lc for example will give you a line chart if that’s the best way of displaying your data.

Here is a list of all the  different chart types and their code.

When you change chart type, you may need to modify the other parameters you have to get it to display and a lot of trial and error is the best way of figuring this out.

Chart features – other parameters

&chco=980043 

Series colour

&chs=310×150 

Size

&chbh=

Spacing between bars

chxt=x,y 

Visible axes

&chxr=1,0,60

Axis ranges

&chds=0,60 

Scale

&chd=t {% of women aged 30 to 34 with a degree},{% of men aged 30 to 34 with a degree}

The data you want your chart to display. You can either use a curly bracket to bring in data from your table or input a value. After each data range use | to indicate a new value range in the next column/line etc.

&chtt={difference in rate between women and men}%+difference+between+women+and+men

Chart title. You can either use a column from your fusion table to change based on each value, or just text. As you can seem I have used both. Important to say here that you need to use a + sign whenever you want to have a space in between the text, as it will not recognise spaces.

&chxl=0:|Women|Men|

Axis labels

Here is the full list of chart parameters when making your chart and you will need to change these around based on your values and what type of chart you want to display, but having the code already is a good starting point.

Happy mapping!

Advertisements

2 thoughts on “How to build charts in your Google Fusion Tables info-window

  1. Pingback: Regional news and data journalism | Digitally Focused
  2. Pingback: Wouter van Loon: Interactive maps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s