Javascript-форум - Как подгрузить в div вторую страницу которая использует api?

Вот пытаюсь прикрутить диаграмму с помощью JS и API от goole. Пример беру от сюда:
https://developers.google.com/chart/...llery/piechart

Но задача стоит немного не тривиальная, сразу показываю что у меня есть.

Есть первый файл
1.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('#graf').load('2.html');
});
</script>
<div id='graf'></div>
</body>
</html>

В этом файле подгружаю в div содержимое второго файла, где и должна рисоваться диаграмма

2.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./js/jquery.js"></script>
</head>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('statistic'));

        chart.draw(data, options);
      }

</script>
<body>
<div id='statistic'></div>
</body>
</html>

Открываю браузер, 1.html, пустота, нажимаю F12 для просмотра ошибок в консоле (ошибок нет), вкладка Elements (в ней обычно расписывается структура DOM) изменилась совсем на другую, даже моих div нет:

<html>
<head>
<script src="https://www.google.com/uds/?file=visualization&amp;v=1.1&amp;packages=corechart" type="text/javascript"></script>
<link href="https://www.google.com/uds/api/visualization/1.1/737afc8ce041665a74b6490aec432568/ui+ru.css" type="text/css" rel="stylesheet">
<script src="https://www.google.com/uds/api/visualization/1.1/737afc8ce041665a74b6490aec432568/webfontloader,format+ru,default+ru,ui+ru,corechart+ru.I.js" type="text/javascript">
</script>
</head>
</html>

Возможно вы скажете, подключай API во втором файле, тогда у меня возникает ошибка
Uncaught ReferenceError: google is not defined

При этом если я открою в браузере сразу 2.html, то все прекрасно рисуется.

Подскажите советом )