Google Visualization API - Internet Explorer 7 - Access is denied.

**wout** · September 28th, 2008, 12:16 AM

I found the solution for this problem myself and thought it can probably help others.

Turns out that the Google Visualization creates an iframe in the chart div. To let the Lightstreamer code communicate with the chart, and thus the iframe, the domain of the document in the iframe needs, also, to be set to the same domain used in the Pushpage.context.setDomain() call. If created a simple function to this: function setVisualizationDomain(el, domain) which needs to be called after the first draw of the visualization/chart. In the first draw(), the iframe is created.

Here is the updated page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
		<title>Lightstreamer Demo</title>
		<script type="text/javascript" language="JavaScript" src="content/js/LS/lscommons.js"></script>
		<script type="text/javascript" language="JavaScript" src="content/js/LS/lspushpage.js"></script>
		<script src="http://www.google.com/jsapi?key=ABQIAAAABMEsCWm7ArCHaJ7EfNHyjRRfA77vZl8sU-2EUdQXl-flLnD-IBS9DtkAJQKD_YN4JmjL49vaqBS4eQ" type="text/javascript"></script>
		<script type="text/javascript">
			
			function drawChart(chart, data, opt) {
				opt = opt || {};
				chart.draw(data, {width: 800, height: 400, is3D: true, title: 'Stock data'});
				if( opt.redrawTime ) {
					setInterval(function() {
						drawChart(chart, data, opt);
					}, opt.redrawTime);
					delete(opt.redrawTime);
				}
			}

			function setVisualizationDomain(el, domain) {
				var frames = el.getElementsByTagName('iframe');
				if( frames.length > 0 ) {
					window.frames[frames[0].id].document.domain = domain;
				}
			}

			function initApp() {
				var schema = "stock_name last_price min max";

				var	groupArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
				var groupString = "";
				for (var st = 1; st <= groupArray.length; st++) {
					groupString += "item" + groupArray[st-1] + " ";
				}

				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Stockname');
				data.addColumn('number', 'Last price');
				data.addColumn('number', 'Min price');
				data.addColumn('number', 'Max price');
				data.addRows(groupArray.length);

				var chartEl = document.getElementById('chart_div')
				var chart = new google.visualization.BarChart(chartEl);
				drawChart(chart, data, { redrawTime: 1000 });
				setVisualizationDomain(chartEl, 'woutm6300.nl');

				var page = new PushPage();
				page.context.setDomain("woutm6300.nl");
				page.onEngineCreation = function(engine) {
					engine.connection.setLSHost("push.woutm6300.nl");
					engine.connection.setLSPort("8081");
					engine.connection.setAdapterName("DEMO");
					engine.changeStatus("STREAMING");
				}
				page.bind();
				page.createEngine("LightstreamerTest", "content/js/LS", "SHARE_SESSION");

				var pushtable = new NonVisualTable(groupString,schema,"MERGE");
				pushtable.setDataAdapter("QUOTE_ADAPTER");
				pushtable.setSnapshotRequired(true);
				
				pushtable.onItemUpdate = function(itemPos, updateInfo, itemName) {
					data.setValue(itemPos - 1, 0, updateInfo.getNewValue(1));
					data.setValue(itemPos - 1, 1, parseFloat(updateInfo.getNewValue(2)));
					data.setValue(itemPos - 1, 2, parseFloat(updateInfo.getNewValue(3)));
					data.setValue(itemPos - 1, 3, parseFloat(updateInfo.getNewValue(4)));
				}

				page.addTable(pushtable, "1");
			}

			google.load("visualization", "1", {
				packages:["barchart"]
			});

			google.setOnLoadCallback( initApp );
		</script>
	</head>
	<body>
		<div id="chart_div" style="width: 800px; height: 400px"></div>
	</body>
</html>