Alex Rivera | Logout

Can I customize the tooltip text in a Google Geochart chart?

Asked 2012-08-01T03:30:19.160
20

Below is the code I'm using, based on a how to I found in Google's documentation, but I'm not sure if it applies to the Geochart, if I'm doing it right, or if there is some other way to do it for a Geochart.

This code works fine if I don't include the tooltip column. When I do, I get the error "Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)," displayed where the Geochart should be.

This question addresses the same issue, but not specifically for a Geochart.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

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

    function drawRegionsMap()
    {

        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ],
            [ 'Alabama', 3, 'tooltip test text' ],
            [ 'Arizona', 1, 'tooltip test text' ],
        ]);

        var options =
        {
            region:         'US',
            resolution:     'provinces',
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>
Edit
Report

1 Answer

8

There are three alternatives presented in this thread

  • Set the formatted value of your data points manually (using the #setFormattedValue() DataTable method)
  • Use one of the formatters on a DataTable column
  • Include a 'tooltip' role column in the DataTable

I've personally used first one, and with your example should be like

var data = google.visualization.arrayToDataTable([
    [ 'State', 'Relevance' ],
    [ 'Alabama', { v: 3, f: 'tooltip test text' } ],
    [ 'Arizona', { v: 1, f: 'tooltip test text' } ],
]);
answered 2012-08-08T07:37:09.440

Your Answer