title: Google charts not showing on Safari
body: <p>I'm trying to draw a Pie-chart with Google charts. It's working fine on Chrome and my Firefox, but not on a friend's Firefox nor on my Safari. I've been through everything I can think of or read about. The id's are correct when I view the source.</p>
  
  <p>To narrow it down, I've added some text to the console.log, firstly after document.ready and secondly inside the drawchart function. The 'Document Ready' text is appearing on all browsers, but then on some, it's not going into the drawchart function at all.</p>
  
  <p>Here's how I have it set up in my HTML head.</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.0rc1.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
      &lt;script src="js/sortable.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;$(function() { $( ".SStabs" ).tabs(); }); &lt;/script&gt;
  
      &lt;!--Load the charts API--&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  </code></pre>
  
  <p>There's a few other things in there such as JQuery UI, not sure if they could be clashing or something.</p>
  
  <p>Then in my JS I have ....</p>
  
  <pre><code>$(document).ready(function() {
  
  console.log('Document Ready');
  
  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);
  
  });
  </code></pre>
  
  <p>And my drawchart function is this.... note that on the failing browsers, it doesn't even show the console log text. On the others, it works all the way through and displays the charts correctly, so I don't think it's an issue with this function. I think the issue is with the callback because it's not even reaching this function.</p>
  
  <pre><code>function drawChart() {
      console.log('Drawchart');
  
      var thisChartElement = document.getElementById('match_stat_pie_chart0');
  
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'test');
      data.addColumn('number', 'kkkk');
      data.addRows([
        ['a', 9],
        ['b', 8]
      ]);
  
      // Set chart options
      var options = {'title':'Percentage of Play', colors:['red', 'blue'], 'is3D':true, 'width':400, 'height':300};
  
      // Instantiate and draw the chart, passing in the options.
      var chart = new google.visualization.PieChart(document.getElementById('match_stat_pie_chart0'));
      chart.draw(data, options);
  }
  </code></pre>
  
  <p>The ID is correct, I've cut and pasted to make sure it's spelt exactly right. And as I say, it works on several browsers.</p>