How to load second page in div that uses api?

G

gpfspam2015-09-18 18:18:33

Google

gpfspam, 2015-09-18 18:18:33

Here I am trying to fasten the chart using JS and API from goole. I take an example from here .

But the task is a bit non-trivial, I immediately show what I have.

There is a first file
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>

In this file, I load the contents of the second file into div, where the

2.html diagram should be drawn:

<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>

I open the browser, 1.html, empty, press F12 to view errors in the console (no errors), the Elements tab (the DOM structure is usually signed in it) has changed completely, even my divs are gone:

<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>

Perhaps you will say, connect the API in the second file, then I get an error

Uncaught ReferenceError: google is not defined

Moreover, if I open 2.html in the browser right away, then everything is perfectly drawn.

Give advice)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

awoland, 2015-09-18
@awoland

canvas id="graph" ?