I am facing an issue where only the last row is being displayed in a Google Geochart for each country, despite trying to fetch data from my database via JSON. The problem is that only 'Supplier 2' is showing up, as highlighted below. I have gone through this answer and tried implementing the suggested group() method, but it gives me a console error that I cannot debug successfully: 'unexpected token }', pointing to the closing curly bracket in the declaration of var groupData.
Currently, without using the group() method, this is what shows up. I also need to display 'Supplier 1'.
https://i.sstatic.net/7BfB3.png
This is the code snippet:
function incAvailableCountry() {
$.ajax({
url: "inc-analysis/country-available.php,
dataType: "json"
}).done(function(jsonData){
var data = new google.visualization.DataTable(jsonData);
var groupData = google.visualization.data.group(
data,
[0, 1],
[{
aggregation: google.visualization.data.count,
column, 0
}]);
var options = {
width: 'auto',
keepAspectRatio: true,
legend: 'none'
};
for (var i = 0; i < data.getNumberOfRows(); i++) {
var locationRows = groupData.getFilteredRows([{
column: 0,
value: data.getValue(i, 0)
}]);
var nameTooltip = '';
locationRows.forEach(function(index){
if (nameTooltip !== '') {
nameTooltip += ', ';
}
nameTooltip += groupData.getValue(index, 1);
});
data.setValue(i, 1, nameTooltip);
}
var chart = new google.visualization.GeoChart(document.getElementById('incAvailableCountry'));
chart.draw(data, options);
});}
PHP Code:
<?php include '../core/init.php';
$query = mysqli_query($conn, "(SELECT Country, Supplier
FROM table
GROUP BY Supplier)
ORDER BY Country");
$table = array();
$table['cols'] = array(
array('label' => 'Country', 'type' => 'string'),
array('label' => 'Supplier', 'type' => 'string')
);
$rows = array();
while ($r1 = mysqli_fetch_assoc($query)) {
$temp = array();
$temp[] = array('v' => (string)$r1['Country']);
$temp[] = array('v' => (string)$r1['Supplier']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
JSON Result:
{"cols":[
{"label":"Country","type":"string"},
{"label":"Supplier","type":"string"}],"rows":[
{"c":[{"v":"Spain"},
{"v":"Supplier 1"}]},
{"c":[{"v":"Spain"},
{"v":"Supplier 2"}]}]}
HTML Code:
<script src="https://www.google.com/jsapi"></script>
<script>google.charts.load('current', {'packages': ['geochart'], 'mapsApiKey': 'key...'});</script>
<div id="incAvailableCountry"></div>