moshfeu/iframe.html

## iframe.html
<!DOCTYPE html>
<html>
  <body>
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
    <div id="chart_div"></div>
    <siv id="loading">Loading...</siv>

    <script>
      // Initiate google charts
      google.charts.load('current', { packages: ['corechart', 'line'] });
      google.charts.setOnLoadCallback(init);

      function onEvent(details) {
        const data = new google.visualization.DataTable();
        data.addColumn('date', 'day');
        data.addColumn('number', 'Page Views');

        data.addRows([...details]);

        const options = {
          pointSize: 5,
          hAxis: {
            title: 'Time',
            format: 'dd/MM/yy',
          },
          vAxis: {
            title: 'Popularity',
          },
        };

        const chart = new google.visualization.LineChart(
          document.getElementById('chart_div')
        );

        chart.draw(data, options);
      }

      function init() {
        // Listen to messages from the page
        window.addEventListener('message', ({ data: { type, data } }) => {
          if (type === 'graph') {
            onEvent(data);
            document.querySelector('#loading').style.display = 'none';
          }
        });
      }
      // Tell the page the iframe's ready
      window.parent.postMessage({ type: 'ready' }, '*');
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<script
	type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"
	></script>
	<div id="chart_div"></div>
	<siv id="loading">Loading...</siv>

	<script>
	// Initiate google charts
	google.charts.load('current', { packages: ['corechart', 'line'] });
	google.charts.setOnLoadCallback(init);

	function onEvent(details) {
	const data = new google.visualization.DataTable();
	data.addColumn('date', 'day');
	data.addColumn('number', 'Page Views');

	data.addRows([...details]);

	const options = {
	pointSize: 5,
	hAxis: {
	title: 'Time',
	format: 'dd/MM/yy',
	},
	vAxis: {
	title: 'Popularity',
	},
	};

	const chart = new google.visualization.LineChart(
	document.getElementById('chart_div')
	);

	chart.draw(data, options);
	}

	function init() {
	// Listen to messages from the page
	window.addEventListener('message', ({ data: { type, data } }) => {
	if (type === 'graph') {
	onEvent(data);
	document.querySelector('#loading').style.display = 'none';
	}
	});
	}
	// Tell the page the iframe's ready
	window.parent.postMessage({ type: 'ready' }, '*');
	</script>
	</body>
	</html>