Google Charts Aren't Working In IE11, (but Works In Chrome) How To Fix It?

I have two pages, one index.html page that shows all charts and one page that shows a chart and table. Surprisingly, all charts from index.html can be seen in IE11 but when I open

Solution 1:

IE doesn't like the extra commas in the addColumn statements...

data.addColumn('string', 'Business Rule',);
data.addColumn('string', '%',);
data.addColumn('string', 'Total OK Values',);
data.addColumn('string', 'Total Values',);

not needed, remove them...

data.addColumn('string', 'Business Rule');
data.addColumn('string', '%');
data.addColumn('string', 'Total OK Values');
data.addColumn('string', 'Total Values');

---

also, google charts only needs to be loaded once per page,
not once per chart.

you can load multiple packages at the same time.

google.charts.load('current', {packages:['corechart', 'table']});

see following working snippet...

google.charts.load('current', {packages:['corechart', 'table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Metric', 'Score'],
    ['Uniqueness', 45.3],
    ['', 54.7]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var options = {
    legend: 'none',
    title: 'Unique Identifiability',
    pieHole: 0.6,
    colors: ['#ff0000', '#808080']

  };

  var chart = new google.visualization.PieChart(document.getElementById('uniqueness'));
  google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
  });
  chart.draw(view, options);


  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Business Rule');
  data.addColumn('string', '%');
  data.addColumn('string', 'Total OK Values');
  data.addColumn('string', 'Total Values');

  data.addRows([
    ['Birth date must be filled', '58%','75365','129940'],
    ['Country must be filled', '98%','294028','300029'],
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="uniqueness" style="width: 1200px; height: 700px;"></div>
<div id="table_div"></div>