Geochart Google Visualization Not Showing Certain Countries In Asp.net

There is a bug which is hard for me to solve, but I managed to narrow it down to simple steps that can be reproduced. 1) Go to https://developers.google.com/chart/interactive/docs/

Solution 1:

something I noticed.

if you run / refresh the following Chart 1, over and over, it appears there is a delay when filling in 'South Sudan' it is consistently the last to fill color

however, if the ISO 3166-1 alpha-2 code is used -- 'SS' there is no delay when filling the color, as in Chart 2 below.

maybe try using'SS'instead of'South Sudan'

test charts...

Chart 1 - 'South Sudan'

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700],
      ['Sudan', 700],
      ['South Sudan', 700]
    ]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['geochart']
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><scriptsrc="https://www.google.com/jsapi"></script><divid="chart_div"></div>

Chart 2 - 'SS'

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700],
      ['Sudan', 700],

      // use object notation to correct tooltip
      [{v: 'SS', f: 'South Sudan'}, 700]
    ]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['geochart']
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><scriptsrc="https://www.google.com/jsapi"></script><divid="chart_div"></div>