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

wout

Hi,

I'm trying to use both the Lightstream JavaScript client AND Google Visualization API om one HTML page, which uses the StockDemo adapter that comes with the Lightstreamer distribution. The following demo page should show a bar chart with data from the StockDemo adapter.

The page works fine on Google Chrome and FireFox 3, but gives 'Access is denied.' on IE7.
If the Google Visualization part is removed from the page, the Lightstreamer part works fine also on IE7.
If the Lightstreamer part is removed, the Google part works fine also in IE7.

Question is, is there a way to use both Lightstream JavaScript client AND the Google Visualization API on one page?

Here is the source of the page:

[html]
<!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>
</head>
<body>
<div id="chart_div"></div>
<div id="container"></div>

<script type="text/javascript">

function drawChart(chart, data) {
chart.draw(data, {widthx: 1600, height: 600, is3D: true, title: 'Stock data'});
}

function initApp() {
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("STOCKLISTDEMO");
engine.changeStatus("STREAMING");
}
page.bind();
page.createEngine("Lightstreamer.Test", "content/js/LS", "SHARE_SESSION");

var schema = "last_price time pct_change bid_quantity bid ask ask_quantity min max ref_price open_price stock_name item_status";

var groupArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30);
var groupString = "";
var st = 1;
for (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 chart = new google.visualization.BarChart(document.getElementById('chart_div'));
drawChart(chart, data);
var pushtable = new NonVisualTable(groupString,schema,"MERGE");

pushtable.onItemUpdate = function(itemPos, updateInfo, itemName) {
if (updateInfo.isValueChanged(12)) {
var stock_name = updateInfo.getNewValue(12);// By field index because by field name 'stock_name' does NOT work (returns null)
var last_price = parseFloat(updateInfo.getNewValue(1));
var min_price = parseFloat(updateInfo.getNewValue(8));
var max_price = parseFloat(updateInfo.getNewValue(9));
document.getElementById("container").innerHTML +=
"Item update: "
+ "itemPos=" + itemPos
+ ", stock_name=" + stock_name
+ ", last_price=" + last_price
+ ", itemName=" + itemName
+ "<br/>";

data.setValue(itemPos - 1, 0, stock_name);
data.setValue(itemPos - 1, 1, last_price);
data.setValue(itemPos - 1, 2, min_price);
data.setValue(itemPos - 1, 3, max_price);

drawChart(chart, data);
}
}

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

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

google.setOnLoadCallback(function() {
// When google is loaded, initialize the rest of the application.
initApp();
});
</script>
</body>
</html>
[/html]

Dario Crivelli

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

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]
<!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>
</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 :Smile_Ah: "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>
[/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. :Smile_Ac:

Thanks,

Wout

wout

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]
<!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 :Smile_Ah: "barchart"]
});

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

Alessandro Alinone

Hi Wout,

Thanks! This is really helpful :Smile_Ab:

Cheers,

Alessandro

DavidMorgan

Is there any obvious reason this fix wouldn't work with IE 8 too?

David

Mone

Hi,

not at all,
which domain and hosts are you using?