Is it possible to use more than 3 columns for google visualization GEO Map

3,640 views
Skip to first unread message

Torbjorn Zetterlund

unread,
Mar 13, 2013, 8:12:21 AM3/13/13
to google-visua...@googlegroups.com
Hi,

I have the following Table 

Office Total Staff     # of IT staff  # of HR staff # of Sales staff
Belgium      53       15            13                      14
France     96            50            14                      21

My Code is 
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Office',   'Total Staff', '# of IT Staff', '# of HR staff', '#of Sales staff'],
        ['Belgium',      53,            15,              13,               14          ],
        ['France',       96,            50,              14,               21          ],
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div"</div>
  </body>
</html>
See attached image on how the information is displayed with 3 columns, I additional columns to be displayed when hover over a country.

Now when I add additional columns, I get an error saying - Incompatible data table: Error: Table contains more columns than expected (Expecting 3 columns)

I'm aware that there is a limitation to number of columns, what wonder is there a workaround to get more information to display in the box showing up when hover over a country?

Torbjorn









Picture1.png

asgallant

unread,
Mar 13, 2013, 11:52:32 AM3/13/13
to google-visua...@googlegroups.com
It is nominally possible to add data from multiple columns to the tooltip, but GeoCharts don't yet have fully customizable tooltips.  You can use a DataView to join multiple columns together and present the chart with two columns containing the country and the color value, with the color value column formatted with the additional information.  Something like this:

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: 'Total Staff',
    calc: function (dt, row) {
        return {
            v: dt.getValue(row, 1),
            f: dt.getFormattedValue(row, 1) + ' (' + dt.getFormattedValue(row, 2) + ' IT, ' + dt.getFormattedValue(row, 3) + ' HR, ' + dt.getFormattedValue(row, 4) + ' Sales)'
        }
    }
}]);

...
chart.draw(view, {...

Sourav Kapre

unread,
Mar 19, 2018, 9:04:52 AM3/19/18
to Google Visualization API
what should be written in front of chart.draw(view, {....Please complete this line and please provide complete code for the same
Reply all
Reply to author
Forward
0 new messages