javascriptnode.jschart.jsgoogle-visualizationreact-google-charts

GeoChart with nodeJS


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:

enter image description here


Solution

  • 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);
      };
    

    enter image description here