I have integrated a google geo chart into my application. I am following the example provided in this link using database data.
https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en
The data array looks like this:
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31]])
in that format.
I am structuring my data similarly to the data variable but the chart is not displaying.
var arr=[];
$.ajax({
type: 'POST',
url: "LiveMap",
dataType: "json",
success: function (response) {
for (var i = 0; i < response.length; i++) {
var temp=[];
var str=response[i].split(':');
temp[0]=str[0];
temp[1]=parseInt(str[1]);
temp[2]=parseInt(str[2]);
arr[i]=temp;
}
}
});
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn("string","City");
data.addColumn("number","Population");
data.addColumn("number","Area");
data.addRows(arr);
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" style="width: 300px; height: 300px;"></div>
</body>
</html>
The response from the ajax call is as follows:
result.put("Bhopal:300:200");
result.put("Hyderabad:300:200");
result.put("Vizag:300:200");
result.put("Mysore:300:200");
result.put("Delhi:300:200")
;