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

**DarioCrivelli** · September 26th, 2008, 11:21 AM

Note that the Lightstreamer part sets the document.domain property, which is often the cause of "Access is denied" issues (and of browser-specific issues as well).

If your html pages are static, you could ascertain this by hosting the pages on Lightstreamer Server and using setDomain(null) and see if the problem disappears (of course, this could not be your final solution).

I also notice that the domain setting is performed after the initialization of the Google part, which may introduce side effects. To reduce complexity, you could try moving the first part of Lightstreamer initialization (until "page.bind()") before the Google initialization.

**wout** · September 26th, 2008, 12:35 PM

Hi Dario,

I tried what you suggested regarding Lightstreamer initialization, but that didn't solve the problem.
As you already stated, hosting the pages on Lightstreamer server, is no option. The web application is based on ASP.NET and hosted in IIS.

Now I ripped all overhead from the page, keeping the part where the problem is:

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>
<!--
		//Tried this, but doesn't help:
		
		<script type="text/javascript">
			document.domain = 'woutm6300.nl';
		</script>
-->
		<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>
	</head>
	<body>
		<div id="chart_div"></div>
		<div id="container"></div>

		<script type="text/javascript">
/*
			// Tried this, but doesn't help:
			
			document.domain = 'woutm6300.nl';
*/
			var page = new PushPage();
			page.context.setDomain("woutm6300.nl");
			page.onEngineCreation = function(engine) {
				engine.connection.setLSHost("push.woutm6300.nl");
			}

			page.bind();				// By adding this line the Access is denied exception is thrown.

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

			google.setOnLoadCallback(function() {
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Stockname');

				chart = new google.visualization.BarChart(document.getElementById('chart_div'));
				chart.draw(data);		// By adding this line the Access is denied exception is thrown.
			});

		</script>
	</body>
</html>

I have put some comments in the page where I tried things that didn't solve the problem.

Probably the problem can't be solved due to browser security restrictions. That would mean that we can't use Lightstreamer together with all existing and upcoming Google API's like Google Maps etc.

Thanks,

Wout

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