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