Fusion Table Info window provide you with a space to put text or HTML code you like. What is important you can choose the content of your info window based on the data in Fusion Table columns. This is starting to be fun when you include Google Charts and create interactive dynamic charts for the readers.
1. Once data has been cleaned and uploaded to Google Fusion Tables and Map view created. How you can do this was described in previous tutorials. We can start changing our InfoWindow.
2. First we need to click on Change InfoWindow layout in left column and then switch from Automatic to Custom tab.
3. Now let's start designing our chart. Google Charts API basically allows you to create pretty graphs simply by using an URL with correct parameters specified. It is fairly flexible, with many things you can change and customize. What is even better we don't need to care about all coding and html, we can generate our Google Chart using this website - Google Chart Generator.
4. The best is to decide what type of chart we want to use and just write some random numbers and words. We will change it anyway, but it will give us information where we need to include our data from Fusion Table. This what we get, now let's take a closer look
<img src="http://chart.apis.google.com/chart?cht=p&chd=t:1,2,3&&chs=450x200&chtt=Test Chart&chco=FF0000&chl=Data1|Data2|data3">
5. Let's take a closer look
<img src="http://chart.apis.google.com/chart?
cht=p - Chart Type
&chd=t:1,2,3 - Chart Data, this is the most important part !
&chs=450x200 - Chart size
&chtt=Test Chart - Chart title
&chco=FF0000 - Chart color in rrggbb hexadecimal format.If you specify one single color, the slices will have different gradations. You can also specify a gradient with two colors (chco=ff0000,00ff00) or a color for each slice (chco=ff0000|3355aa|8322c2|112233).
&chl=Data1|Data2|data3" - Chart data legend
6. Now what we need to do is to replace data with our data from Fusion Table Columns.
7. Paste the code from generator and change data after &chd=t: You can just click on column name in left panel . You can change also other details like legend, colors etc.
8. Click save and that's all ! Now you can check on your map.
2. First we need to click on Change InfoWindow layout in left column and then switch from Automatic to Custom tab.
3. Now let's start designing our chart. Google Charts API basically allows you to create pretty graphs simply by using an URL with correct parameters specified. It is fairly flexible, with many things you can change and customize. What is even better we don't need to care about all coding and html, we can generate our Google Chart using this website - Google Chart Generator.
4. The best is to decide what type of chart we want to use and just write some random numbers and words. We will change it anyway, but it will give us information where we need to include our data from Fusion Table. This what we get, now let's take a closer look
<img src="http://chart.apis.google.com/chart?cht=p&chd=t:1,2,3&&chs=450x200&chtt=Test Chart&chco=FF0000&chl=Data1|Data2|data3">
5. Let's take a closer look
<img src="http://chart.apis.google.com/chart?
cht=p - Chart Type
&chd=t:1,2,3 - Chart Data, this is the most important part !
&chs=450x200 - Chart size
&chtt=Test Chart - Chart title
&chco=FF0000 - Chart color in rrggbb hexadecimal format.If you specify one single color, the slices will have different gradations. You can also specify a gradient with two colors (chco=ff0000,00ff00) or a color for each slice (chco=ff0000|3355aa|8322c2|112233).
&chl=Data1|Data2|data3" - Chart data legend
6. Now what we need to do is to replace data with our data from Fusion Table Columns.
7. Paste the code from generator and change data after &chd=t: You can just click on column name in left panel . You can change also other details like legend, colors etc.
8. Click save and that's all ! Now you can check on your map.
TIP: Unfortunately the Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012 by Google. It will continue to work for one or two years probably. New Chart Api is based on JavaScript and we can't use it in infowindow.
No comments:
Post a Comment