Here is the data from my DataTable:
Country Types of sales Total sales($) Name State
United states of America chemicals 12662871 Obama GA
United states of America electronics 20145684 Romney ON
United states of America textiles 22458756 Gliton MB
United states of America automobiles 34235684 Andrew Jackson BC
United states of America chemicals 19438333 James Madison AB
If I change the column from 'State' to 'Name', the names are plotted on the geochart map as shown in the attached file.
This change only applies when the displayMode is set to Marker.
Below is the JavaScript code snippet for achieving this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Name', 'Total Sales'],
['Romney', 20145684],
['Obama', 12662871],
['Gliton', 22458756],
['Andrew Jackson', 34235684],
['James Madison', 19438333]
]);
var options = {
region: 'US',
resolution: 'provinces',
displayMode:'markers',
width: 400,
height: 400,
colorAxis: {
colors: ['#FF0000']
}
};
var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
geochart.draw(data, options);
google.visualization.events.addListener(geochart, 'select', function (eventOption) {
var item = geochart.getSelection();
var value = data.getValue(item[0].row, 1);
alert(value);
});
}
google.load('visualization', '1', { packages: ['geochart'] });
google.setOnLoadCallback(drawMarkersMap);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
Please provide a solution to help me resolve this issue. Thank you in advance.