hyperlinks within fusion charts (patternformat?)

[ess0]

Hi, I posted this to the Fusion Tables API group but I'm not sure how cross-posting works (and whether posts there need to be approved before going live). I'm trying to make a directory of websites, querying a fusion table. 

Fusion table ID: 1361649 (http://www.google.com/fusiontables/DataSource?dsrcid=1361649)

Table on a test page: http://fusiontables.tumblr.com/test

So instead of having the URLs be its own column, I'd like to have the names hyperlinked, so the table would look more like this:

Jane Doe      |    New York, NY

Jim Park       |    Mountain View, CA

Lane Smith   |    Los Angeles, CA

I've so far been unsuccessful in mashing up the PatternFormat example  with my current configuration for calling the fusion table as a data source for my table viz. Does anyone know of any solutions, or is this viz feature not available for fusion tables?

[visigoth]

Hi,

I'll consult with someone on the team who is more familiar with the Table visualization tomorrow.

In the meantime, can you please verify that you specify the allowHtml option as mentioned in comment #3 in the Formatters section of the documentation?

Thanks,

visigoth

[asgallant]

I don't know if this is exactly what you are looking for, but it should work:

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

function drawVisualization() {
    var queryText = encodeURIComponent("SELECT col0, col1, col2 FROM 1361649");
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='+ queryText);
    query.send(getData);
}

function getData(response) {
    var data = response.getDataTable();
    data.addColumn('string', 'foo');
    var formatter = new google.visualization.PatternFormat('<a href="{1}">{0}</a>');
    formatter.format(data, [0, 1], 3);

    new google.visualization.Table(document.getElementById('visualization')).draw(data, {
        allowHtml: true,
        showRowNumber: false,
        alternatingRowStyle: true
    });
}

google.setOnLoadCallback(drawVisualization);

You can create a view from 'data' excluding the columns you don't need and draw the chart using the view if you don't want to see the extra columns.

[ess0]

Oh, that's a great solution, asgallant. Worked great!

[ess0]

Oh, and thanks! :)

[asgallant]

You're welcome.