An Example of a Google Bar Chart

by lmeurs

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- <div id="chart_div"></div> -->
<button onclick="joe()">Open grafiek!</button>

JavaScript

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

// @link https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/linechart.html

function drawChart(elm) {

	var data = google.visualization.arrayToDataTable([
    ['', 'Dev (q)', 'Dev (hrs)'],
    ['hold',  1000,      400],
    ['todo',  1170,      460],
    ['doing',  660,       1120],
    ['done',  1030,      540]
  ]);

  var options = {
    title: 'Trello filters: ...',
    legend: { position: 'bottom' },
    colors: ['#a52714', '#097138'],
  };


  var chart = new google.visualization.LineChart(elm);

  chart.draw(data, options);
}

function joe() {

const winHtml = `<!DOCTYPE html>
    <html>
        <head>
            <title>Mijn grafiek!</title>
        </head>

        <body>
            <h1>Hello from the new window!</h1>
						<scr` + `ipt type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></scr` + `ipt>
  				<div id="chart_div"></div>
					<scr` + `ipt type="text/javascript"> window.opener.postMessage({message: 'Hello world'}, '*'); </scr` + `ipt>
        </body>
    </html>`;

const winUrl = URL.createObjectURL(
    new Blob([winHtml], { type: "text/html" })
);

jaja = window.open(
    winUrl,
    "win",
    `width=800,height=400,screenX=200,screenY=200`
);

  jaja.document.close();
}

window.addEventListener('message', function(event) {
  drawChart($(jaja.document).find('#chart_div')[0]);
}, false);