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

Question

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>

Answer 1

In order to customize the tooltip to use html including new line / images please check this example: http://jsfiddle.net/SD4KA/

    google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world<br>test'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
            isHtml: true
        }
    });
}

Since v1.1 geochart supports html for tooltips

Answer 2

I ran into a similar issue for a scatter chart. I had to use arrayToDataTable to get the data into the chart as opposed to DataTable() and addColumn() as suggested in other answers.

In order to get it to work, you make the call to arrrayToDataTable() as you are currently doing and saving to the variable data.

Then, you need to specify which column you want to be treated as a tooltip (and you must specify which columns should be plotted as well). In the following example, columns 0 and 1 contain the plot data, and column 2 contains the tooltip strings.

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]);

Finally, you must make the call to draw with the view variable rather than with the data variable:

chart.draw(view, options);

Answer 3

I was able to include the text i wanted in the tooltip, including the values this way:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([

    [{v:"US",f:"United States of America"},1,"21% of Visits"],

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"],

    [{v:"DE",f:"Germany"},3,"6% of visits"],

    [{v:"FR",f:"France"},4,"5% of visits"],

    [{v:"ES",f:"Spain"},5,"5% of visits"],

    [{v:"CA",f:"Canada"},6,"4% of visits"],

    [{v:"IT",f:"Italy"},7,"4% of visits"],

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"],

    [{v:"BR",f:"Brazil"},9,"4% of visits"],

    [{v:"TR",f:"Turkey"},10,"3% of visits"],

    [{v:"IN",f:"India"},11,"3% of visits"],

    [{v:"RU",f:"Russia"},12,"3% of visits"],

    [{v:"AU",f:"Australia"},13,"2% of visits"],

]);

This way, for example "United States of America" would be line 1 of the tooltip, and "21% of visits" would be the second line. With this format I can include whatever text I want in the tooltip, in both lines.

Answer 4

It seems like it is impossible to format the text the exact way I was attempting to with the GeoChart tool. Below is the solution I finally came up with and the rendered map:

Rendered Map with Tooltip View

PHP & JavaScript Code

<!-- generate geo map -->
<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()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            <?php echo $data_table; ?>
        ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          <?php echo $width; ?>,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div>

Rendered HTML

<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()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            [ 'State', 'in', 'String' ],
            [ 'Arizona', 2, 'Has Facility, Sells Direct' ],
            [ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ],
            [ 'Colorado', 1, 'Sells Direct' ],
            [ 'Florida', 1, 'Has Distributor' ],
            [ 'Georgia', 1, 'Has Distributor' ],
            [ 'Idaho', 1, 'Sells Direct' ],
            [ 'Illinois', 1, 'Has Distributor' ],
            [ 'Indiana', 1, 'Has Distributor' ],
            [ 'Iowa', 1, 'Has Distributor' ],
            [ 'Kansas', 1, 'Has Distributor' ],
            [ 'Kentucky', 1, 'Has Distributor' ],
            [ 'Louisiana', 1, 'Has Distributor' ],
            [ 'Maryland', 2, 'Has Distributor' ],
            [ 'Montana', 1, 'Sells Direct' ],
            [ 'Nevada', 2, 'Has Facility, Sells Direct' ],
            [ 'New Mexico', 2, 'Has Facility, Sells Direct' ],
            [ 'North Carolina', 1, 'Has Distributor' ],
            [ 'North Dakota', 1, 'Has Distributor' ],
            [ 'Oklahoma', 1, 'Sells Direct' ],
            [ 'Oregon', 1, 'Sells Direct' ],
            [ 'Pennsylvania', 1, 'Has Distributor' ],
            [ 'South Carolina', 1, 'Has Distributor' ],
            [ 'Tennessee', 1, 'Has Distributor' ],
            [ 'Texas', 1, 'Has Distributor' ],
            [ 'Utah', 2, 'Has Facility, Sells Direct' ],
            [ 'Washington', 1, 'Sells Direct' ],
            [ 'Wyoming', 1, 'Sells Direct' ],       ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          286,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: 286px; height: 180px;"></div>

Answer 5

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' } ],
]);