Action script

**Cyro** · July 22nd, 2009, 10:10 AM

nvm I got it to work and on the other side I get this something like this:

time Value
0.010 -0.020
0.020 -0.025
0.030 -0.010
0.040 -0.010
0.050 -0.015
0.060 -0.010
0.070 -0.020
0.080 -0.025
0.090 -0.040
0.100 -0.035
0.110 -0.055
0.120 -0.040
0.130 -0.055
0.140 -0.055
0.150 -0.045
0.160 0.005
0.170 0.030
0.180 0.060
0.190 0.055
0.200 0.120
0.210 0.085
0.220 0.055
0.230 -0.010
0.240 -0.005
0.250 -0.090
0.260 -0.095

(the values overwrite! but this is just example in which way they go.

Anyway - time is advancing 0.01 and value is erratic. I need to plot it in HTML. But I don't even get peep from that part of code. Here's client. (First part works perfectly but problem is with graph.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<script language="JavaScript" src="LS/lscommons.js"></script>
<script language="JavaScript" src="LS/lspushpage.js"></script>
</head>

<body>
<h1>Simplest</h1>
<table width="440" cellspacing="0" cellpadding="2" border="0">
<tr class="titolClass">
<td width="150">
<p style="text-align: left">Value</td>
<td width="80">Time<br><span style="font-size: 7pt"></span></td>

</tr>
<tr>
<td nowrap class="greyClass"><div class="nameClass1" source="lightstreamer" table="table1" item="Next" field="Next">Loading</div></td>
<td class="greyClass"><div class="greyClass" source="lightstreamer" table="table1" item="Next" field="timestamp">Loading</div></td>
</tr>

<script>

/////////////////PushPage Configuration

var schemaTable = ["timestamp", "Next"];
var schemaChart = ["Next", "timestamp"];
var group = ["Next"];

var lsPage = new PushPage();
var debugAlerts = false;
var remoteAlerts = false;
var pushHost = null;
var pushPort = null;
var useDomain = null;

lsPage.context.setDomain(useDomain);
lsPage.context.setDebugAlertsOnClientError(debugAl erts);
lsPage.context.setRemoteAlertsOnClientError(remote Alerts);

lsPage.onEngineCreation = function(lsEngine) {
lsEngine.context.setDebugAlertsOnClientError(debug Alerts);
lsEngine.context.setRemoteAlertsOnClientError(remo teAlerts);

lsEngine.connection.setLSHost(pushHost);
lsEngine.connection.setLSPort(pushPort);
lsEngine.connection.setAdapterName("SIMPLEST");

lsEngine.changeStatus("STREAMING");
}

lsPage.bind();
lsPage.createEngine("SimplestEng","LS","SHARE_SESS ION");

///////////////////////Table configuration

var table1 = new OverwriteTable(group, schemaTable, "MERGE");
table1.setClearOnDisconnected(true);
table1.setClearOnRemove(true);
lsPage.addTable(table1, "table1");

var lines = {};
var gTable = new ChartTable(group, schemaChart, "MERGE");
gTable.setSnapshotRequired(false);
gTable.setAreaClass("lsgbox");
gTable.setAreaWidth(1200);
gTable.setAreaHeight(300);
gTable.setAreaLeft(40);
gTable.onItemUpdate = onChartUpdate;
gTable.setClearOnRemove(true);
gTable.setClearOnDisconnected(false);
gTable.setClearOnAdd(false);

function onChartUpdate(item, upOb) {
var sec = upOb.getNewValue(table1);
var prc = upOb.getNewValue(table1);

}
</script>
</body>

</html>

**Mone** · July 22nd, 2009, 12:10 PM

you removed too much from the ChartDemo.

You need a piece of html, where the chart will be appended:

and you miss some javascript that adds the table to the PushPage, and configures the axis and the chart line (you should remove your onChartUpdate function)

finally you need some CSS classes (that maybe you already have) like those:

I think that's all

**Cyro** · July 22nd, 2009, 12:24 PM

I've done what you said but still have nothing. Firebug found error on

pushpage.addtable(gTable,"graph");

so I changed it to the already defined lsPage. Now I don't get error but neither do I get anything beyond those two columns.

**Mone** · July 22nd, 2009, 01:53 PM

I can't see what I forgot...

I set up a dummy adapter that serves the same item (Next) with the same fields (Next and timestamp) as yours.

Then I use its data with this front-end html page and it works correctly (the PushPage/engine configuration is done in the external misc.js file; as you did note my PushPage object is called pushPage while yours is lsPage).

Note also that the positionXAxis and positionYAxis calls are made with static values; this is usually not appropriate and you have to find a way to configure them correctly accordingly with the data you're receiving (that's why in our ChartDemo we wait for the fist update before configuring them).

Please be sure also to check the jsDocs for the ChartTable and ChartLine classes

Try to take a look at it:

<html><br />
<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta><br />
<script language="JavaScript" src="../commons/lightstreamer/lscommons.js"></script><br />
<script language="JavaScript" src="../commons/lightstreamer/lspushpage.js"></script><br />
<br />
<style><br />
  .lspx {<br />
    width:1px; <br />
    height:1px; <br />
    background-color: black;<br />
  }<br />
  .lspxbig {<br />
    width:1px; <br />
    height:1px; <br />
    background-color: black;<br />
  }<br />
  .lsgbox {<br />
    background: yellow;<br />
  }<br />
</style><br />
</head><br />
<br />
<body><br />
<br />
<div source="lightstreamer" table="table1" item="Next" field="Next">Loading</div><br />
<div source="lightstreamer" table="table1" item="Next" field="timestamp">Loading</div><br />
<br />
<div table="graph" source="lightstreamer"></div><br />
<br />
<br />
<script src="../commons/custom/misc.js" type="text/javascript"></script><br />
<script><br />
<br />
var schemaChart = ["Next", "timestamp"];<br />
var group = ["Next"];<br />
<br />
<br />
var table1 = new OverwriteTable(group, schemaChart, "MERGE");<br />
table1.setClearOnDisconnected(true);<br />
table1.setClearOnRemove(true);<br />
pushPage.addTable(table1, "table1"); <br />
<br />
var gTable = new ChartTable(group, schemaChart, "MERGE");<br />
gTable.setSnapshotRequired(false);<br />
gTable.setAreaClass("lsgbox");<br />
gTable.setAreaWidth(1200);<br />
gTable.setAreaHeight(300);<br />
gTable.setAreaLeft(40);<br />
gTable.setClearOnRemove(true);<br />
gTable.setClearOnDisconnected(false);<br />
gTable.setClearOnAdd(false);<br />
gTable.setXAxis("timestamp", false);<br />
gTable.positionXAxis(0, 1);<br />
  <br />
var chartLine = new ChartLine();<br />
chartLine.setPointClass("lspxbig");<br />
chartLine.setLineClass("lspx");<br />
chartLine.setYAxis("Next","Next",false);//the first "Next" is the item, the second one the field<br />
chartLine.positionYAxis(-0.2,0.2);<br />
<br />
gTable.addLine(chartLine,"anyId");<br />
  <br />
pushPage.addTable(gTable,"graph");<br />
<br />
</script><br />
</body><br />
<br />
</html> <br />

HTH

**Cyro** · July 23rd, 2009, 08:34 AM

it finally works. I get the required graph. And it closely resembles sent values. I thank you for your help.

I'll go play with Flex to see if I can create a little more dynamic graph and everything but essentially I'm done. Mission acomplished.

ps. Can I get source code from that Flash stocklist demo just so I could see what it looks like? it may be of help in making flash application.

**Alessandro** · July 24th, 2009, 01:50 PM

Cyro,

You can find the source code of the Flash demo inside your Lightstreamer distribution in the "DOCS-SDKs/sdk_client_flash_flex(js_bridge)/examples/FlashStockList" folder.

Thread: Action script

Thread Tools

Search Thread

Display

Hybrid View

Similar Threads

IE script warning

Why web client keep receiving "<script>p();</script>"

Unresponsive Script

Bookmarks

Bookmarks

Posting Permissions