Error with VisualTable

tuongkha

Hi,
I going to http://app.lightstreamer.com/GridDemo and save as html file, after that i modified something.

Here my changed : http://www.gls.com.vn:8080/priceonline/test.htm

It has errors. See picture below.

How to fix it?

In NonVisualTable, i have two variables that will be passed to the NonVisualTable's constructor. Those variables will be Arrays. Each array's element is an item/field name.

-------
Here my code (in non-visualTable) :

.....
var schema = ["last_price", "time", "_change", "bid1", "bid1vol", "bid2", "bid2vol", "bid3", "bid3vol", "ref_price", "open_price", "stock_symbol", "ceiling" , "ask1", "ask1vol", "ask2", "ask2vol", "ask3", "ask3vol", "floor", "min", "max", "lastVol", "lastVal", "price1", "vol1", "price2", "vol2", "room", "remainingroom", "vnIndex", "idxVol", "idxVal", "idxchange", "idxperchange", "item_status"];

var page1 = 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, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100, 101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120, 121, 122,123,124,125,126,127,128,129,130,131, 132,133,134,135, 136, 137, 138, 139,140,141,142,143,144,145,146,147,148,149,150,151,152,153, 154, 155);

groupArray=page1;
var groupString = "";
var st = 1;
for (st = 1; st <= 155; st++)
{
groupString += "item" + groupArray[st-1] + " ";
}

actGroup = groupArray;
var newTable = new OverwriteTable(groupString, schema, "MERGE");
...
-----------------
Now, How about in VisualTable? Have I need Initialize two variables that will be passed to the VisualTable's constructor? If yes/no, How do I do?

Thanks!

Dario Crivelli

If you still refer to our GridDemo, note that there is no NonVisualTable in it.
Each row of the table is associated to an instance of an OverwriteTable, which is created by a call to createAndAppendTable, while the set of all available items (i.e. the visible ones and the hidden ones) is fixed. Do you need to have this set dynamic, so that you need a NonVisualTable for this task?

Also note that in the GridDemo implementation there is no "group" and "schema" variable. Item and field names are not passed directly to the OverwriteTable constructor (nulls are specified); they are rather cast in the cells, so that the OverwriteTable can look for them in the associated cells.
Each time the table scrolls, cells from old lines are removed, together with their associated OverwriteTable instance; then, cells for new lines are dynamically added and associated to brand new OverwriteTable instances, through a "table"+index name.

You should extend createTableDOM to handle all your fields and,
as long as your item names have the form "item1", ... "item155",
you should lean on the numeric argument of createAndAppendTable to address your various items. I think that the slider range configuration range:$R(1,26) is the only place where the total number of items is supplied (where the maximum position of 26 represents the first line of the farthest possible 5-rows scrollable screen).

tuongkha

Hi Dario,
In my application http://www.gls.com.vn:8080/priceonline/hose.html, I have too many items in the same page, resulting in a heavy snapshot being sent when you first load the page (CPU always 100%). So, to solve this problem, i try to do what you say (http://www.lightstreamer.com/vb/showthread.php?t=333).

Do you need to have this set dynamic, so that you need a NonVisualTable for this task?

I don't understand "set dynamic" --> what "set dynamic" for? items or field names?

Because in VisualTable, the item and field names are not passed directly to the OverwriteTable constructor. Now, in my code, i changed :
------
function createAndAppendTable(index)
{
...
var newTable = new OverwriteTable(null, null, "MERGE");
}

It still has error --> http://www.gls.com.vn:8080/priceonline/test.htm, and my slider didn't show.

You should extend createTableDOM to handle all your fields and,
as long as your item names have the form "item1", ... "item155",
you should lean on the numeric argument of createAndAppendTable to address your various items

-----
If you can, please give me the simplest structure, like this :
Constructor
....
method:
contents of this method
...

By the way, can you explain more about (marked by red color) :
function createTableDOM(index)
{
if (typeof parkedDOM[index] != "undefined" && parkedDOM[index] != null)
{
return parkedDOM[index]; --> purpose of variables.?
}
...
}

Thanks!

Mone

In my application http://www.gls.com.vn:8080/priceonline/hose.html, I have too many items in the same page, resulting in a heavy snapshot being sent when you first load the page (CPU always 100%). So, to solve this problem, i try to do what you say (http://www.lightstreamer.com/vb/showthread.php?t=333).

I have no access to port 8080 at the moment, btw if the 100% problem is just on the snapshot you could try other approaches than the grid. eg.: don't show any illumination (if any) on the snapshot updates will reduce a lot the load on the cpu.

Btw,

It still has error --> http://www.gls.com.vn:8080/priceonline/test.htm, and my slider didn't show.

again, I can't see the error at the moment, but note that you've to include script.aculo.us to show the slider and that script.aculo.us depends from prototype.js

By the way, can you explain more about (marked by red color) :

the parkedDOM is an object used as an hashmap that stores parts of DOM (each one containing the html for a line in the grid) that were created but are no longer in use (ie are not on the view). This way if due to the scrolling one of such lines returns back on the view there is no need to recreate it and the stored one can be used.

HTH, please let me know if it's clear

Dario Crivelli

About:

@tuongkha, Wrote: I don't understand "set dynamic" --> what "set dynamic" for? items or field names?

I meant the set of all possible items to be scrolled in the page.
As long as your setis not dynamic , but fixed, i.e. item1, ... , item155, it fits to the GridDemo example.

About the current error:
This is because the addField("up_down",...) tries to add the "up_down" field, but that field is already in the subscription schema.
This, in turn, is because there are cells defined for the "up_down" field and the OverwriteTable(null, null, "MERGE") form gets the subscription schema by collecting all the field names used in the cells.
Note that the original GridDemo code sets values on the "up_down" field in a different way.

tuongkha

Hi Dario,
I fixed my error ("up_down" field), but it still has error when you first page loaded -->
http://www.gls.com.vn:8080/priceonline/test.htm

Here my directory :
C:\Lightstreamer\pages\priceonline\test.htm
C:\Lightstreamer\pages\priceonline\js\prototype.js
C:\Lightstreamer\pages\priceonline\js\scriptaculous.js
C:\Lightstreamer\pages\priceonline\js\controls.js
C:\Lightstreamer\pages\priceonline\js\slider.js

and my slider can't show.

Dario Crivelli

Please consult a HTML expert.
I suppose that setting width=100% on the first column of a table and width=30 on the second column prevents the second column from being shown.
In your case, the first column of the outmost table contains an inner table with all the cells, while the second column contains the slider. I see that the HTML code that declares the slider is grayed in Firebug.

tuongkha

Hi Dario,
i know u aren't html expert (maybe), but i only going to http://app.lightstreamer.com/GridDemo and save as *.html file, just modified js script code (didn't modified html code).

Here my modified --> http://www.gls.com.vn:8080/priceonline/test2.htm , but it didn't show slider bar. I don't know why in HTML code that declares the slider is grayed in Firebug.

I hate to bother u but i'm a newbie in developer. I apologize about this.

Here my error, when you first page load.
-----------

Mone

Hello,

please, try to enable firebug and check if there are javascript errors.
have configured correctly the domain settings? (if you grab our html the page is configured with the "lightstreamer.com" domain)

tuongkha

Hi Mone,
I have enabled firebug and there aren't js errors.

Here my configured in html page, i removed "lightstreamer.com" domain :
--------------
var lsPage = new PushPage();
var debugAlerts = true;
var remoteAlerts = false;
var pushHost = null;

//for test
lsPage.context.setDomain(null);

lsPage.context.setDebugAlertsOnClientError(debugAlerts);
lsPage.context.setRemoteAlertsOnClientError(remoteAlerts);

lsPage.onEngineCreation = function(lsEngine)
{
lsEngine.context.setDebugAlertsOnClientError(debugAlerts);
lsEngine.context.setRemoteAlertsOnClientError(remoteAlerts);

lsEngine.connection.setLSHost(pushHost);
lsEngine.connection.setLSPort(null);
lsEngine.connection.setAdapterName("HOSE");

lsEngine.policy.setMaxBandwidth(30);
lsEngine.policy.setIdleTimeout(30000);
lsEngine.policy.setPollingInterval(1000);

lsEngine.changeStatus("STREAMING");
}

lsPage.bind();
lsPage.createEngine("SLEngine","ls/");
----
And here my Firebug screen :

Mone

from the last image it seems that Lightstreamer is pushing, isn't it?

about the slider, did you change our slider's code?
[syntax="JS"]var values = new Array();
for (var x = 1; x <= 26; x += 1) {
values[values.length] = x;
}
new Control.Slider('handleFakeScrollbar','fakeScrollbar',{axis:'vertical',sliderValue:1,values:values,step:1,increment:1,range:$R(1,26),
onSlide:function(v){
updateWInd(v);
},
onChange:function(v){
updateWInd(v);
}});
[/syntax]
maybe the problem is that you didn't get the css styles ( http://app.lightstreamer.com/GridDemo/css/table.css) and/or the handle image ( http://app.lightstreamer.com/GridDemo/images/handle.png ).

tuongkha

Hi Mone,
Thank u. You right. My problem is that didn't get the css styles and have "handle.png" image. Now I fixed --> http://www.gls.com.vn:8080/priceonline/test.htm

and by the way, i have 156 items and i want to show 30 items per pages.Here my changed :
-------

var maxVisible = 30;
var values = new Array();
for (var x = 1; x <= 156; x += 1) {
values[values.length] = x;
}
new Control.Slider('handleFakeScrollbar','fakeScrollbar',{axis:'vertical',sliderValue:1,values:values,st ep:1,increment:1,range:$R(1,156),
onSlide:function(v){
updateWInd(v);
},
onChange:function(v){
updateWInd(v);
}});
------
Is it correct? When u holding the slider bar to scroll-down or scroll-up, in Firefox it loading data faster than IE (i'm using IE7). I don't know why.

And it still has 100% CPU when you first load the page.

Dario Crivelli

Simone is not at office today; for my understanding of the GridDemo code, in both places where you put 156, you should rather use 127 (that is: 156 - 30 + 1 = 127),
as that value should represent the index of the first line of the last page of 30 items out of the total 156.

tuongkha

Hi Dario,
Thank you. How about a problem when u holding the slider bar to scroll-down or scroll-up, in Firefox it loading data faster than IE (i'm using IE7)? I don't know why.

And it still has 100% CPU when you first load the page.

Mone

How about a problem when u holding the slider bar to scroll-down or scroll-up, in Firefox it loading data faster than IE (i'm using IE7)? I don't know why.

What do you mean with "loading data faster"? The loading of the cells, or the loading of the snapshot or maybe the movement of the slider?
I don't know if it could be related to JS code rather then on the IE's engine.

And it still has 100% CPU when you first load the page.

How much time does it stand on 100%?
You should try to cut down your page until you find what's so heavy on the cpu. Note that a lot of data rendering and illumination could be heavy.

tuongkha

Hi Mone,

What do you mean with "loading data faster"? The loading of the cells, or the loading of the snapshot or maybe the movement of the slider?

I mean the movement of the slider and loading of the cells. You can try it --> http://www.gls.com.vn:8080/priceonline/test.htm

How much time does it stand on 100%?

--> Estimated from 01 to 03 minutes, to finished load the page.

I were turn off illumination.

Dario Crivelli

I could see the site and replicate the CPU activity issue,
but it was on the order of the seconds, not minutes.
The CPU peak while sliding the slider cannot be explained.
However, the slider seems not to be configured correctly for you specific page,
as I can't move it by clicking on the bar. We don't know if configuration problems may have undesired effects.
Please ensure the correct configuration of the slider by looking on the public scriptaculous documentation, at http://script.aculo.us

tuongkha

Hi Dario,
If u're using IE, u can't move slider by clicking on the bar, but if u're using Firefox, u can. That's a problem i want to ask u. I verified on public scriptaculous documentation.

The order of images :
image 01 : processing at 00:52 (mm:ss)
image 02 : processing at 01:30
image 03 : processing at 02:46

My computer has P3-550 Mhz, 512MB RAM, Windows XP (SP3).

Alessandro Alinone

Hi Tuongkha,

We cannot provide help on third-party libraries. Have you tried to contact them directly?

Cheers
Alessandro

tuongkha

Again, how nice of you to help me in my work!
Have a good day.