Google Visualization API - Internet Explorer 7 - Access is denied.
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 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>
</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:["barchart"]
});
google.setOnLoadCallback(function() {
// When google is loaded, initialize the rest of the application.
initApp();
});
</script>
</body>
</html>
