You had a few typos in your code:
Changed
if (evt && evt.data & evt.data.hasOwnProperty("data"))
to
if (evt && evt.data && evt.data.hasOwnProperty("data"))
Changed:
function drawchart()
to
function drawChart()
Full updated code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script src="../jquery.csv.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawBasic);
var initialized = true;
var _chartData = null;
var data = null;
var bar = null;
var options = {
is3D: true,
chartArea: {
left: 80,
bottom: 100,
width: '100%',
height: '100%'
},
piesliceText: 'label',
legend: {
position: 'bottom'
},
width: '100%',
height: '100%'
};
function onMessage(evt) {
if (evt && evt.data && evt.data.hasOwnProperty("data"))
updateData(evt.data);
}
if (window.addEventListener) {
//For standards-compliant web browsers
window.addEventListener("message", onMessage, false);
} else {
window.attachEvent("onmessage", onMessage);
}
//create trigger to resizeEnd event
$(window).resize(function () {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
$(this).trigger('resizeEnd');
}, 25);
});
//redraw graph when window resize is complete
$(window).on('resize End', function () {
drawChart();
});
function drawChart() {
if (bar)
bar.draw(data, options);
}
function updateData(chartData) {
if (!initialized) {
_chartData = chartData;
return;
}
if (chartData) {
var arrayData;
var columnInfo = chartData.columns;
if (chartData.data) {
arrayData = chartData.data;
if (columnInfo) {
arrayData.splice(0, 0, columnInfo);
}
}
data = google.visualization.arrayToDataTable(arrayData);
} else {
data = google.visualization.arrayToDataTable([]);
}
bar = new google.visualization.PieChart(document.getElementById('piechart'));
drawChart();
}
function drawBasic() {
var _data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7],
['Relax TV', 1],
['Exercise', 1.5],
['Read', 1],
['Meditate', .5]
]);
var _options = {
title: 'My Daily Activities',
is3D: true,
width: '900px',
height: '500px',
piesliceText: 'label',
};
var bar = new google.visualization.PieChart(document.getElementById('piechart'));
bar.draw(_data, _options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
During development - you may want to enable the developer console (F12 in chrome) - it typically shows syntax errors like these.
Hope this helps!
Falko
... View more
