Google Geo Chart Incompatible data table: Error: Table contains more columns than expected (Expecting 3 columns)

Question

I have the following code and found Incompatible data table: Error: Table contains more columns than expected (Expecting 3 columns)

function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['State',                             'User', 'Company','data'],
    ['Australian Capital Territory',       100,        160, 100],
    ['Northern Territory',                 250,        250, 200 ],
    ['Western Australia',                  150,        350, 300],
    ['New South Wales',                    300,        100, 400],
    ['Victoria',                           50,         156, 50],
    ['Queensland',                         10,         150, 20],
    ['South Australia',                    160,        168, 23],
    ['Tasmania',                           250,        568, 3443]
    ]);

  var options = {
    region : 'AU',
    displayMode : 'markers',
    colorAxis : {
      colors: ['blue', 'red']
    }

  };

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

};

Answer 1

Geocharts do not support having 3 different data columns as you have.

Region Charts

For region charts, the data should include only:

1. Region (Country, Subcontinent, Continent, etc.)
2. Color (Determines color for each region based on a single data category)

Marker Charts

For marker charts, the data should include only:

1. Location (either latitude/longitude, or a string indicating location)
2. (optional) Name of Location for Latitude/Longitude Locations only
3. Color (color of the marker based on a single data category)
4. Size (size of the marker based on a single data category)

Currently your example is a marker chart with a third data category, which isn't supported (your User will determine color, and Company will determine size).

Answer 2

This is your solution:

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, {...