I'm trying to get only the values with 2 characters, example: "AC", "RS" from the region variable to put in the chart, I have to pass these values inside the data variable so that the graph is formed correctly. Values with only 1 character will not be included in this graph values: 'null', "B", 'K', 'S', 'W', 'X'.
does anyone have any idea how i can do this?
google.load('visualization', '1', {
'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);
async function drawRegionsMap() {
var region = [
{
"key": null,
"value": 15
},
{
"key": "AC",
"value": 162
},
{
"key": "AL",
"value": 861
},
{
"key": "AM",
"value": 358
},
{
"key": "AP",
"value": 73
},
{
"key": "B",
"value": 1
},
{
"key": "BA",
"value": 4889
},
{
"key": "CE",
"value": 2178
},
{
"key": "DF",
"value": 3396
},
{
"key": "ES",
"value": 4339
},
{
"key": "GO",
"value": 3226
},
{
"key": "K",
"value": 1
},
{
"key": "MA",
"value": 1422
},
{
"key": "MG",
"value": 19913
},
{
"key": "MS",
"value": 1221
},
{
"key": "MT",
"value": 1946
},
{
"key": "PA",
"value": 1280
},
{
"key": "PB",
"value": 1222
},
{
"key": "PE",
"value": 2785
},
{
"key": "PI",
"value": 1060
},
{
"key": "PR",
"value": 6483
},
{
"key": "RJ",
"value": 20454
},
{
"key": "RN",
"value": 1287
},
{
"key": "RO",
"value": 362
},
{
"key": "RR",
"value": 87
},
{
"key": "RS",
"value": 5646
},
{
"key": "S",
"value": 1
},
{
"key": "SC",
"value": 4150
},
{
"key": "SE",
"value": 768
},
{
"key": "SP",
"value": 43880
},
{
"key": "TO",
"value": 408
},
{
"key": "W",
"value": 1
},
{
"key": "X",
"value": 1
}
]
var data = google.visualization.arrayToDataTable([
['Country', {role: 'annotation'}],
['BR-SP', 300],
['BR-PE', 200],
['BR-RS', 100],
['BR-AM', 400]
]);
var view = new google.visualization.DataView(data)
view.setColumns([0, 1])
var options = {
region: 'BR',
resolution: 'provinces',
height: 600
};
var chart = new google.visualization.GeoChart(
document.getElementById('chart_div'));
chart.draw(data, options);
var geochart = new google.visualization.GeoChart(
document.getElementById('chart_div'));
var options = {
region: 'BR',
resolution: 'provinces',
displayMode: 'regions',
height: 600,
colorAxis: {
colors: ['#d00d0d']
},
};
geochart.draw(data, options);
follow the graphic image:
My Answer
google.load('visualization', '1', {
'packages': ['geochart', 'table']
});
google.setOnLoadCallback(drawRegionsMap);
async function drawRegionsMap() {
let region = await request();
var lista = [];
for(var i = 0; i < region.length; i++){
lista.push("BR-" + region[i].key, region[i].value);
}
var estados = region.filter(myFunction);
function myFunction(estado){
if(estado.key != null){
return estado.key.length == 2;
}
}
var charData = [
['Estados', 'Pedidos']
]
estados.forEach(pedido => charData.push(["BR-" + pedido.key, pedido.value]));
var data = google.visualization.arrayToDataTable(charData);
var view = new google.visualization.DataView(data)
view.setColumns([0, 1])
var options = {
region: 'BR',
resolution: 'provinces',
height: 600
};
var chart = new google.visualization.GeoChart(
document.getElementById('chart_div'));
chart.draw(data, options);
var geochart = new google.visualization.GeoChart(
document.getElementById('chart_div'));
var options = {
region: 'BR',
resolution: 'provinces',
displayMode: 'regions',
height: 600,
colorAxis: {
colors: ['#d00d0d']
},
};
geochart.draw(data, options);
};