How do I add a new line to the tooltip text in a Google Geochart chart?

Question

I'm using Google's GeoChart API to generate a map of the US. I want to highlight the states based on one value, but then display some extra information about each state in the tool tip that displays when you hover over a state. I'd like the finished tool tip to look like this:

Nevada
Relevance: 4 ( the data driving the state highlight )
Data
More Data

The map works great, and I can add any text I want to the tooltip using the PatternFormat() function, but it strips or ignores all the new line options I've tried:

var formatter = new google.visualization.PatternFormat('some data\nmore data');
formatter.format(data, [0], 1);

I've tried all of these new line options and none of them work: <br>, <br />, , &#10, &#x0A, &#x0D, \u000A, \u000D, \n, \r, \r\n, %0A, %0D

Any suggestions on things to try or what actually works? This seems possible in some of the other Google charts.

The rendered HTML looks like this

<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' ],
            [ 'Arizona', 2 ],
            [ 'California', 4 ],
            [ 'Colorado', 1 ],
            [ 'Florida', 1 ],
            [ 'Georgia', 1 ],
            [ 'Idaho', 1 ],
            [ 'Illinois', 1 ],
            [ 'Indiana', 1 ],
            [ 'Iowa', 1 ],
            [ 'Kansas', 1 ],
            [ 'Kentucky', 1 ],
            [ 'Louisiana', 1 ],
            [ 'Maryland', 2 ],
            [ 'Montana', 1 ],
            [ 'Nevada', 2 ],
            [ 'New Mexico', 2 ],
            [ 'North Carolina', 1 ],
            [ 'North Dakota', 1 ],
            [ 'Oklahoma', 1 ],
            [ 'Oregon', 1 ],
            [ 'Pennsylvania', 1 ],
            [ 'South Carolina', 1 ],
            [ 'Tennessee', 1 ],
            [ 'Texas', 1 ],
            [ 'Utah', 2 ],
            [ 'Washington', 1 ],
            [ 'Wyoming', 1 ]
        ]);

        data.addRows([
            ['Has Distributor', 1],
            ['Sells Direct', 1]
        ]);

        var formatter = new google.visualization.PatternFormat('data <br> <br /> &#13; &#10 &#x0A &#x0D \u000A \u000D \n \r \r\n %0A %0D more data');
        formatter.format(data, [0], 1);

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

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

    };

</script>

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

Can you show us what the rendered HTML looks like with any of these examples? — Hanlet Escaño, Aug 24 '12 at 20:51

score 2 · Answer 1 · answered Mar 18 '16 at 14:19

2

For anyone coming across this question you can set in the chart options tooltip: {isHtml: true} from the docs

answered Mar 18 '16 at 14:19

Martin Lyne

3,157
2
22
28

score 2 · Answer 2 · answered Apr 28 '22 at 07:17

Tested & working. Save the data as a multi-line CSV.

To do this, format multi-lines to have quotes.

IMPORTANT - you have to use \r for the real end-of-line characters, not \r or \r\n like normal.

e.g.

123,456,"this\n\is\nfour\nlines",678\r
234,567,"another\nmulti",789\r

All google things that use this data from now-on understand how to show it with multi-lines properly.

score 0 · Answer 3 · answered Aug 27 '12 at 12:57

Take a look at using data table roles. In a nutshell, you add a new column with a role of tooltip, and then you can customize what appears however you'd like.

I've used this before successfully with line and column charts, but the chart gallery pages for line and column charts explicitly mention that they support roles, whereas the geo chart page does not. That may not mean that they aren't supported; it may just not be a documented feature.

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

From all my research and testing I am almost positive that it is currently impossible to add a new line to the tooltip text inside a GeoChart. See this question for the solution I eventually came up with. This did not solve the new line problem, but reformatted the tooltip in a way that worked for my application and may help others.

edited May 23 '17 at 11:54

Community

1
1

answered Aug 27 '12 at 21:40

T. Brian Jones

13,002
25
78
117

How do I add a new line to the tooltip text in a Google Geochart chart?

4 Answers4