Google fusion table and data visualization - New Google Chart API and Fusion Table Info Window - Tutorial !

New Google Chart API it's great tool to work with Fusion Table and Google Maps, together in your hand it's will take yours works to the next level ! In this tutorial I will show You how to create cool map with charts based on data from Google Fusion Table. Remember Google Chart API is so simple yet so powerful that can give you some amazing features:

DEMO on GitHub

• Rich Gallery - Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.
• Customizable - Make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website.
• HTML5 / SVG - Cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases. No plugins are needed.
• Free - Use the same chart tools Google uses, completely free and with three years' backward compatability guaranteed.
• Controls and Dashboards New! - Easily connect charts and controls into an interactive dashboard.
• Dynamic Data - Connect to your data in real time using a variety of data connection tools and protocol.

TIP: You should know that the Image Charts (Old API) portion of Google Chart Tools has been officially deprecated as of April 20, 2012 by Google. But the new Chart API is much more powerful and nice looking too.

First what you should do is to visit Google Chart Gallery where you can find a variety of charts designed to address your data visualization needs. These charts are based on HTML5/SVG technology so no plugins are required.

Lets take a simple case study for our chart map. Suppose you are writing an report on the trends in some important global development issue ie. unemployment in Africa and instead of showing the data in tabular format you could show present the data with some visual cues using map and nice looking charts. You must have already been at a site which shows amazing chart representations for some reports. 

1. Lets build chart, first you need data ! And accessible fusion table, you need to share your table and make it accessible. After you upload data create Map inside fusion table, how to make a map you can find in this tutorial, and on my page.

2. Now you need to create fusion table layer. this will let you create the map directly in the webpage instead of an iframe and this means more flexibility to customize options for your map. With FT Layers you can:

• Layer several maps together
• Change the base map color and details
• Include a search box or pull-down menu to change the mapped data
• Turn off info windows
• Use .css on the content of map info windows

The best way is Fusion Table Layer Wizard 

3. After you set up your layer, copy all html code and paste it to any text editor. Personally I recommend Open Source Notepad++.

4. Now let's make some magic :). Go to your fusion table and create chart. This is my Fusion Table for this tutorial.

5. When your chart is ready go to chart tab and copy link from Publish section. 

6. Let's take a closer look to this link, this is mine, your will probably look a little different. You can just paste link in the browser and your chart will display on the blank page. 

https://www.google.com/fusiontables/embedviz?containerId=googft-gviz-canvas&q=select+col0%2C+col1%2C+col2%2C+col3+from+1r4egxlD-9QeK-4gBrdtTGQFrhdrBoxNhBwQbWUc+order+by+col0+asc+limit+1&viz=GVIZ&t=COLUMN&uiversion=2&gco_forceIFrame=true&gco_hasLabelsColumn=true&width=500&height=300

And here is our chart 

7. Now let's go back for a minute to your Map. Take a look on this script, you an download it from GitHub.

8. Copy Fusion Table ID and other data from your file and paste it to this HTML. Change lines
   [ 25-26] - Your map position and zoom level, optional to change
   [ 32-33] - Fusion table ID and gecodoed column just copy from Fusion table wizard
   [50] - this is your chart just copy link from step 6 and paste it inside iframe tag.

TIP: In my demo I create tabs to show Google Chart that's because chart need some time to request data from fusion table and draw chart. 

9. If you want to customize your chart and pull data just for one column like in my example. You can construct query inside URL like in example below.

https://www.google.com/fusiontables/embedviz?containerId=googft-gviz-canvas&q=select+col0%2C+col1%2C+col2%2Ccol3+from+1r4egxlD-9QeK-4gBrdtTGQFrhdrBoxNhBwQbWUc+%20WHERE%20Country_Name=%27'+ e.row['Country_Name'].value +'%27+order+by+col1+asc+limit+10&viz=GVIZ&t=COLUMN&uiversion=2&gco_forceIFrame=true&gco_hasLabelsColumn=true&att=true&gco_theme=maximized&width=300&height=150

TIP: And remember about proper URL encoding. You an use this decoding/encoding tool 

Now you can see live representation of the chart. Isn’t this concept just fantastic? Now go ahead and start creating some visual presentations in your article and let me know about your creations.

TIP: You can also set your chart as a static image, here is detail information about