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

admin管理员组

文章数量:1357633

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=''></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>

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./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>

• javascript
• html
• google-visualization

Share Improve this question Follow edited Aug 24, 2012 at 21:14 T. Brian Jones asked Aug 24, 2012 at 20:49 T. Brian JonesT. Brian Jones 13.6k2626 gold badges8282 silver badges119119 bronze badges 2

• Can you show us what the rendered HTML looks like with any of these examples? – Hanlet Escaño Commented Aug 24, 2012 at 20:51
• I added the rendered HTML to the question for reference. – T. Brian Jones Commented Aug 24, 2012 at 21:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

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

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.

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.

本文标签： javascriptHow do I add a new line to the tooltip text in a Google Geochart chartStack Overflow