Hide text from Google GeoChart tooltip

Question

I have a Google Geochart that is connected to a Google Spreadsheet. The aim of the chart is to show different categories of universities in our state and their locations. I have assigned values in the spreadsheet in order to have the appropriate marker color for the map to denote the categories.

My problem is that the text denoting the type (a number) is showing in the tooltip. (Example: tooltip shows "ABC University Type 3." I need to either hide this text, or create a string based on conditional logic so that, for example, Type 3 translates to "XYZ System" in the tooltip. Which do you think is the better way to do it, and can you provide guidance as to how to do this?

    <html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>
    google.charts.load('current', { 'packages': ['geochart'] });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
        var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
        query.send(handleQueryResponse);
    }

function handleQueryResponse(response) {var data = response.getDataTable();
    var options = {
        //showTip: true, 
        mapType: 'styledMap', 
        useMapTypeControl: true,
        resolution: 'provinces',
        //displayMode: 'text',
        //magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
        region: 'US-KY',
        keepAspectRatio: true,
        legend: 'none',
        sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
        colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
        markerOpacity: 0.75,
        tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
        dataMode: 'markers'
    };

    var map = new google.visualization.GeoChart(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  <style type="text/css">
  html, body {height: 100%;}
  #chart_div {width: 100%; height: 100%;}
  </style>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

WhiteHat WhiteHat · Accepted Answer · 2016-04-07T15:17:53

You can use the DataView Class to change the formatted value of the Type column.

For instance, the value of the Type column in the DataTable looks like this...
{"v":3.0,"f":"3"}

With the DataView, change it to this...
{"v":3.0,"f":"XYZ System"}

We can also remove the column Label, to avoid seeing it in the tooltip.

See following example...

google.charts.load('current', {
  callback: drawMap,
  packages: ['geochart']
});

function drawMap() {
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();

  // setup school type array
  var schoolTypes = [
    'ABC System',
    'LMO System',
    'XYZ System'
  ];

  // create DataView from DataTable
  var view = new google.visualization.DataView(data);
  
  // set view columns, keep first three columns
  // use calculated column for Type
  view.setColumns([0, 1, 2, {
    type: 'number',
    label: '',
    calc: function (dataTable, rowIndex) {
      return {
        v: dataTable.getValue(rowIndex, 3),
        // get school type from array
        f: schoolTypes[dataTable.getValue(rowIndex, 3) - 1]
      }
    }
  }]);

  var options = {
    //showTip: true,
    mapType: 'styledMap',
    useMapTypeControl: true,
    resolution: 'provinces',
    //displayMode: 'text',
    //magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
    region: 'US-KY',
    keepAspectRatio: true,
    legend: 'none',
    sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
    colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
    markerOpacity: 0.75,
    tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
    dataMode: 'markers'
  };

  var map = new google.visualization.GeoChart(document.getElementById('chart_div'));
  map.draw(view, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

ALSO -- Recommend including loader.js and jsapi only once per page

Hide text from Google GeoChart tooltip

1 Answers