Google Fusion Tables, Maps, and Visualization

[Michael]

Hello:

I am dumbfounded by why I am receiving the following error message of
"a is null".

I am populating a Google map via fusion tables. I am trying to trigger
an event every time a marker is clicked. For instance, a tool-tip
should display and the line graph should change to correspond to the
marker(location). If anyone has any suggestions regarding my code
below, it would be greatly appreciated. Thanks in advance,

google.load('visualization', '1', { 'packages': ['corechart'] });
$(initialize);

// end test
var map, layer;
var tableID = 1961290;
var location_column = 'geometry';
//var name = 'G05OJ023';

function initialize() {
// initialize map
var latlng = new google.maps.LatLng(53.760861,
-98.813876);
var myOptions = {
center: latlng,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style:
google.maps.ZoomControlStyle.SMALL
}
}


map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);



var layer = new google.maps.FusionTablesLayer({
query: {
select: location_column,
from: tableID
}
});
layer.setMap(map);

// click listener - update graph
google.maps.event.addListener(layer, 'click',
function (e) {
drawVisualization(e.row['name'].value);
// click listener - update info window
contents
//customInfoWindow(e);
});
}

function drawVisualization() {
//var queryText = encodeURIComponent("SELECT
year,average_ground_water_level FROM 1961290");
google.visualization.drawChart({
"containerId": "chart_div",
"dataSourceUrl": 'http://www.google.com/
fusiontables/gvizdata?tq=',
"query": "SELECT
year,average_ground_water_level FROM 1961290",
"refreshInterval": 5,
"chartType": "LineChart",
"options": {
"title": "Test",
"vAxis": { "title": "Average Daily
Groundwater Level - (M)" },
"hAxis": {
"title": "Year"
//
"showTextEvery":"5"
}
}
});
}



google.setOnLoadCallback(drawVisualization);

[asgallant]

Is it the map or the chart that is throwing the error?

[Michael]

The visualization chart is giving the error.

[asgallant]

I tried out your script, and I can get the chart to draw as is, but the map won't draw for me (I suspect I have something else wrong on my end there), so I can't test the interactivity between the two, but I noticed the drawVisualization call you make in the event handler passes a parameter to the function, but the function isn't set up to accept any parameters.

You might want to explore the Map Charts (http://code.google.com/apis/chart/interactive/docs/gallery/map.html) which is a Viz API wrapper for Google Maps that is designed to interface with the charts.

[Michael]

I have modified my code to read as follows:

google.load('visualization', '1', { 'packages': ['corechart'] });

// end test
var map, layer;

var tableID = 1974520;

var location_column = 'geometry';
//var name = 'G05OJ023';

function initialize() {
// initialize map
var latlng = new google.maps.LatLng(53.760861,
-98.813876);
var myOptions = {
center: latlng,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style:
google.maps.ZoomControlStyle.SMALL
}
}


map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);

layer = new google.maps.FusionTablesLayer({
query: {
select: location_column,
from: tableID
}
});
layer.setMap(map);

// click listener - update graph
google.maps.event.addListener(layer, 'click',
function (e) {

//console.log(e);
//console.log(e.row['name'].value);
//if the value exists, change the chart
/*
if (e.row['name'].value) {
var tmp = e.row['name'].value;
tmp = G05OJ023;
drawVisualization(tmp);

} else {
alert("null");
e.infoWindowHtml += "null";
}
*/

drawVisualization(e.row['name'].value);
// click listener - update info window
contents
//customInfoWindow(e);


});
}

function drawVisualization(name) {
console.log("Inside drawVisualization
function: " + name);

google.visualization.drawChart({
"containerId": "chart_div",
"dataSourceUrl": 'http://www.google.com/
fusiontables/gvizdata?tq=',
"query": "SELECT

year,average_ground_water_level FROM 1974520 WHERE name = ' + name +
'",
//"query": "SELECT

year,average_ground_water_level FROM 1961290",
"refreshInterval": 5,
"chartType": "LineChart",
"options": {
"title": "Test",
"vAxis": { "title": "Average Daily
Groundwater Level - (M)" },
"hAxis": {
"title": "Year"
//
"showTextEvery":"5"
}
}
});
}

//google.setOnLoadCallback(drawVisualization);



It seems like there is now a problem with querying the fusion table.

[asgallant]

Is the problem on page load or when clicking on the map?

If it's when you click on the map, you are assigning the variable tmp twice; the first time is fine, but the second time you are trying to assign it the value of the variable G05OJ023, when I suspect you intended to pass the string "G05OJ023".

If it's on page load, you commented out the setOnLoadCallback call, which you need.  The call to drawVisualization from setOnLoadCallback can't pass the name, so you'll need to use an intermediary function:

function foo () {
    drawVisualization('default name');
}
google.setOnLoadCallback(foo);

[Michael]

Thanks asgallant!

Your contribution was both helpful and informative. I got it working
as best as I can for now. I believe I was getting errors because I
haven't imported all my data for all points yet into fusion tables.


I have one additional query. How can I display just years on the x
axis as labels. I am pulling the years from a column in one of my
tables (fusion tables). The labels are appearing as ie.) Dec 9, 1970
12:00:00:00 pm and I would like to just show 1970. Any suggestions
greatly appreciated.

Thanks again,
Michael