format value in VisualTable

[tuongkha]

Hi,
I'm going to http://app.lightstreamer.com/GridDemo/ and save as *.html, and modified something --> http://www.gls.com.vn:8080/priceonline/test.htm


In GridDemo source (before i modified) :

//////////////////////////Format callbacks

function updateItem(item, updateInfo) {
if (updateInfo == null) {
return;
}
if (updateInfo.isValueChanged("pct_change")) {
var val = updateInfo.getNewValue("pct_change");
}

var oldLast = updateInfo.getOldValue("last_price");
var newColor;
if (oldLast == null) { //first update for this item
updateInfo.addField("color",upColor,true);
updateInfo.addField("illuminate","OFF",false);
} else if (updateInfo.isValueChanged("last_price")) {
//at least second update
var newPrice = updateInfo.getNewValue("last_price");
if (oldLast > newPrice) {
updateInfo.addField("color",downColor,true);
} else {
updateInfo.addField("color",upColor,true);
}
}
}

-------
Here my changed :
-------

var redColor = "F70033"
var greenColor = "2EFF00";
var yellowColor = "#FFFF00";

function updateItem(item, updateInfo)
{
....
var oldLast = updateInfo.getOldValue("last_price");
var newColor;
if (oldLast == null)
{
//first update for this item
updateInfo.addField("color",greenColor,true); //updateInfo.addField("illuminate","OFF",false);
}

else if (updateInfo.isValueChanged("last_price"))
{
//at least second update
var newPrice = updateInfo.getNewValue("last_price");
if (oldLast > newPrice)
{
updateInfo.addField("color",redColor,true);
}
else if (oldLast < newPrice)
{
updateInfo.addField("color", greenColor,true);
}
else if (oldLast == newPrice)
{
updateInfo.addField("color",yellowColor,true);
} }
}

--------

It didn't show color when "last_price" field has changed. What's wrong?

[Mone]

I'm not able to ping your server at the moment, btw some notes:

it is not the addField method that place the color on the cell, so maybe the problem is in the formatValues method, this is the code that sets the color on the cell:
if (illuminate) {<br /> itemUpdate.setRowAttribute(backH,backC,"background Color");<br /> }<br />

are you sure that your field is called exactly last_price and that's reachable by id (ie and not just by index)?

You've commented out this code:
updateInfo.addField("illuminate","OFF",false);
please note that such extra field is used to avoid illumination on the first snapshot so that to avoid to put a big load on the cpu at startup.

HTH

[tuongkha]

Hi Mone,
Thank for your help. I fixed (format value) --> http://www.gls.com.vn:8080/priceonline/test.htm

I'm not able to ping your server at the moment

Because my firewall not allow ping command.

You've commented out this code:
updateInfo.addField("illuminate","OFF",false);

Yes, i'm commented this code.

Now in NonVisualTable, i have (see below):
------
function formatValues(item, itemUpdate)
{
...
var PriceRe=parseFloat(itemUpdate.getServerValue("ref_ price"));

// format bid1vol, bid1 price, bid2vol, bid2 price, bid3vol, bid3 price
for (var i=4;i<=9;i+=2)
{
//ATO, ATC
if (isNaN(itemUpdate.getServerValue(i)))
{
itemUpdate.setAttribute(i,"#FFFFFF","#FFFFFF","col or");
//itemUpdate.setAttribute(i,"bold","bold","fontWeigh t");

itemUpdate.setAttribute(i+1,"#FFFFFF","#FFFFFF","c olor");
//itemUpdate.setAttribute(i+1,"bold","bold","fontWei ght");
}

else if (cf(itemUpdate.getServerValue(i))==PriceRe)
{
itemUpdate.setAttribute(i,yellowColor,yellowColor, "color");
//itemUpdate.setAttribute(i,"bold","bold","fontWeigh t");
itemUpdate.setAttribute(i+1,yellowColor,yellowColo r,"color");
//itemUpdate.setAttribute(i+1,"bold","bold","fontWei ght");
}
else if (cf(itemUpdate.getServerValue(i))<PriceRe)
{
itemUpdate.setAttribute(i,redColor,redColor,"color ");
//itemUpdate.setAttribute(i,"bold","bold","fontWeigh t");
itemUpdate.setAttribute(i+1,redColor,redColor,"col or");
//itemUpdate.setAttribute(i+1,"bold","bold","fontWei ght");
}
else if (cf(itemUpdate.getServerValue(i))>PriceRe)
{
itemUpdate.setAttribute(i,greenColor,greenColor,"c olor");
//itemUpdate.setAttribute(i,"bold","bold","fontWeigh t");
itemUpdate.setAttribute(i+1,greenColor,greenColor, "color");
//itemUpdate.setAttribute(i+1,"bold","bold","fontWei ght");
}
}
...
}
--------
My schema :
////////////////Global var declaration
// 1. last_price, 2. time, 3. pct_change, 4. bid1, 5. bid1vol, 6. bid2, 7. bid2vol, 8. bid3, 9. bid3vol, 10.ref_price,
// 11. open_price, 12. stock_name, 13. ceiling, 14. ask1, 15. ask1vol, 16. ask2, 17. ask2vol, 18.ask3, 19. ask3vol, 20. floor,
// 21. min, 22. max, 23. lastVol, 24. lastVal, 25. price1, 26. vol1, 27. price2, 28. vol2, 29. room, 30. remainingroom,
// 31. "vnIndex", 32. "idxVol", 33. "idxVal", 34. "idxchange", 35. idxperchange,
// 36. item_status, 37. color, 38.fade, 39.image


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"];

----
Now in VisualTable, How do I do?

My Error (see picture below) :


Here my code :
----------
// format _change
var newValue = itemUpdate.getFormattedValue("_change");
if (newValue != null)
{
var formattedVal = parseFloat(newValue);
if (formattedVal > 0)
{
formattedVal = "+" + formattedVal;
}

if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("ceiling"))
{
//ceiling price
formattedVal = "CE " + formattedVal;
}
else if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("floor"))
{
//floor price
formattedVal = "FL " + formattedVal;
}
itemUpdate.setFormattedValue("_change",formattedVa l);
} // end of if (newValue != null)

[DarioCrivelli]

May you please clarify your goal? Are you trying to hide values that come as "NaN" from the Server?
Note that the simplest way to have the value for field i not being shown is to "format" it as an empty string, through setFormattedValue(i, "");

[tuongkha]

Hi Dario,
1. I want to hide values that come as "NaN" from the Server. I tried using setFormattedValue(i,"");, but it doesn't effect.

// format _change
var newValue = itemUpdate.getFormattedValue("_change");

if ((isNaN(newValue)) || (newValue == null))
{
itemUpdate.setFormattedValue("_change","");
}
if (newValue != null)
{
var formattedVal = parseFloat(newValue);
if (formattedVal > 0)
{
formattedVal = "+" + formattedVal;
}

if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("ceiling"))
{
//ceiling price
formattedVal = "CE " + formattedVal;
}
else if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("floor"))
{
//floor price
formattedVal = "FL " + formattedVal;
}
itemUpdate.setFormattedValue("_change",formattedVa l);
} // end of if (newValue != null)

}

2. I want to format "bid1", "bid1vol", ..., "bid3vol" follow the rules :
loop from "bid1" field --> "bid3" field
{
if (bid1 price < reference price)
{
filling "bid1", "bid1vol" field by red color.
}
else if (bid1 price > reference price)
{
filling "bid1", "bid1vol" field by red color.
}
else if (bid1 price = reference price)
{
filling "bid1", "bid1vol" field by yellow color.
}
}

Like this (in my NonVisualTable code --> http://www.gls.com.vn:8080/priceonline/hose.html) :
-------
var PriceRe=parseFloat(itemUpdate.getServerValue("ref_ price"));

// format bid1vol, bid1 price, bid2vol, bid2 price, bid3vol, bid3 price
for (var i=4;i<=9;i+=2)
{
//ATO, ATC
if (isNaN(itemUpdate.getServerValue(i)))
{
itemUpdate.setAttribute(i,"#FFFFFF","#FFFFFF","col or");

itemUpdate.setAttribute(i+1,"#FFFFFF","#FFFFFF","c olor");

}

else if (cf(itemUpdate.getServerValue(i))==PriceRe)
{
itemUpdate.setAttribute(i,yellowColor,yellowColor, "color");

itemUpdate.setAttribute(i+1,yellowColor,yellowColo r,"color");

}
else if (cf(itemUpdate.getServerValue(i))<PriceRe)
{
itemUpdate.setAttribute(i,redColor,redColor,"color ");
itemUpdate.setAttribute(i+1,redColor,redColor,"col or");

}
else if (cf(itemUpdate.getServerValue(i))>PriceRe)
{
itemUpdate.setAttribute(i,greenColor,greenColor,"c olor");
itemUpdate.setAttribute(i+1,greenColor,greenColor, "color");
}
}

[DarioCrivelli]

Setting the formatted value as an empty string does clear the cell on my tests.
Please confirm that the isNaN test really succeeds.
By the way, note that you took "newValue" by getFormattedValue, while getServerValue would be to prefer.

For the bid fields formatting, the use of our API is correct.
Perhaps do you need to set the "backgroundColor" instead of the "color" attribute?

Unfortunately, your site is not visible at any time of the day (in this season, we have GMT+2 time).

[tuongkha]

Hi Dario,
I sorry about inconvenient, because HoChiMinh's Stock Exchange (VietNam) has trading hour (open stock market) from 8:30 AM to 11:00 AM (GMT +7), if u access in this time, u can see my site how is working? after close time, my site just only show trading results.

1. I fixed error the values that come as "NaN" from the Server (i hidden it).
2. I tried to set the "backgroundColor" instead of the "color" attribute, but it doesn't effect.

Here my changed --> http://www.gls.com.vn:8080/priceonline/test.htm
-------
function formatValues(item, itemUpdate, itemName)
{
...
var backC = null;
var backH ="#636363";
itemUpdate.setRowAttribute(backH,backC,"background ");

if (illuminate)
{
itemUpdate.setRowAttribute(backH,backC,"background Color");
}

//choose the "change" field stylesheet
var newChng = itemUpdate.getFormattedValue("_change");

if (newChng == null) return;
if (newChng != null)
{
var hotTxtCol = (newChng.charAt(0) == '-') ? "#F70033" : "#2EFF00";
if (newChng.indexOf("-") > -1)
{
itemUpdate.setAttribute("_change","black",hotTxtCo l,"color");
itemUpdate.setAttribute("last_price","black",hotTx tCol,"color");
itemUpdate.setAttribute("lastVol","black",hotTxtCo l,"color");
}
else
{
itemUpdate.setAttribute("_change","black",hotTxtCo l,"color");
itemUpdate.setAttribute("last_price","black",hotTx tCol,"color");
itemUpdate.setAttribute("lastVol","black",hotTxtCo l,"color");

}
if (newChng == 0)
{
itemUpdate.setAttribute("_change", "black", "#FFFF00", "color");
itemUpdate.setAttribute("last_price", "black", "#FFFF00", "color");
itemUpdate.setAttribute("lastVol", "black", "#FFFF00", "color");

}

itemUpdate.setAttribute("_change","bold","bold","f ontWeight");
itemUpdate.setAttribute("last_price","bold","bold" ,"fontWeight");
itemUpdate.setAttribute("lastVol","bold","bold","f ontWeight");
}//end of if (newChng != null)

if (newChng.indexOf("-") > -1)
{
itemUpdate.setFormattedValue("up_down",imgDown);
}
else
{
itemUpdate.setFormattedValue("up_down",imgUp);
}
if (newChng == 0)
{
itemUpdate.setFormattedValue("up_down",imgNochange );
}

//format _change
var newValue = itemUpdate.getFormattedValue("_change");

if (newValue != null)
{
var formattedVal = parseFloat(newValue);
if (formattedVal > 0)
{
formattedVal = "+" + formattedVal;
}

if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("ceiling"))
{
//ceiling price
formattedVal = "CE " + formattedVal;
}
else if ((itemUpdate.getServerValue("last_price")) == itemUpdate.getServerValue("floor"))
{
//floor price
formattedVal = "FL " + formattedVal;
}
itemUpdate.setFormattedValue("_change",formattedVa l);
} // end of if (newValue != null)


////format the "number" fields
for (var i = 1; i <= 35; i++)
{
var newValue = itemUpdate.getFormattedValue(i);
if (newValue == null) continue;

if (isNaN(newValue))
{
// ATO, ATC
continue;
}
// neu field co gia tri = 0 thi ko hien thi zero
if (newValue == 0)
{
itemUpdate.setFormattedValue(i,"");
continue;
}

// var formattedVal = parseFloat(newValue);
// itemUpdate.setFormattedValue(i,formattedVal);

} //end of for (var i = 1; i <= 35; i++)


var PriceRe=parseFloat(itemUpdate.getServerValue("ref_ price"));
//format bid
for (var i=4;i<=9;i+=2)
{
//Lenh ATO, ATC
if (isNaN(itemUpdate.getServerValue(i)))
{
itemUpdate.setAttribute(i,"#FFFFFF","#FFFFFF","bac kgroundColor");

itemUpdate.setAttribute(i+1,"#FFFFFF","#FFFFFF","b ackgroundColor");
}

else if (cf(itemUpdate.getServerValue(i))==PriceRe)
{
itemUpdate.setAttribute(i,"#FFFF00","#FFFF00","bac kgroundColor");
itemUpdate.setAttribute(i+1,"#FFFF00","#FFFF00","b ackgroundColor");
}
else if (cf(itemUpdate.getServerValue(i))<PriceRe)
{
itemUpdate.setAttribute(i,"#F70033","#F70033","bac kgroundColor");
itemUpdate.setAttribute(i+1,"#F70033","#F70033","b ackgroundColor");
}
else if (cf(itemUpdate.getServerValue(i))>PriceRe)
{
itemUpdate.setAttribute(i,"#2EFF00","#2EFF00","bac kgroundColor");
itemUpdate.setAttribute(i+1,"#2EFF00","#2EFF00","b ackgroundColor");
}
} //end of for (var i=4;i<=9;i+=2)
...
}

[DarioCrivelli]

Actually, but for a few times (not today), we cannot access to your server at all in GMT+2 office time.
However, also in this case, the use of the APIs is correct and the setting works if tested on our side.
Could you reproduce a similar problem by starting from the StockListDemo in the distribution and performing just a few little changes?

[tuongkha]

Hi Dario,

Could you reproduce a similar problem by starting from the StockListDemo in the distribution and performing just a few little changes?

No, I'm starting from "LS StockList Grid Demo" --> http://app.lightstreamer.com/GridDemo/ (not from StockListDemo in the distribution), and performing just a few little changes.

By the way, I finish modified from StockListDemo sample (using NonVisualTable) --> http://www.gls.com.vn:8080/priceonline/hose.html --> Thanks for your help.

After that, it always has 100% CPU when you first load the page, so I using VisualTable to performance. Here my performance version ---> http://www.gls.com.vn:8080/priceonline/test.htm --> I need your help.

Can you access my server today? Sometime, maybe my server shutdown, if u can, please contact me by skype id : tuongkha or YM nickname : tuongkha2k. I will start my server.

[DarioCrivelli]

Sorry, we cannot afford to setup direct interaction for forum support.

About the formatting problem:
Your changes to the GridDemo are big enough that we can't replicate the case and we cannot find anything wrong in the code snippet. Only if you can replicate a similar formatting problem on a slightly modified StockListDemo front-end, based on the original StockListDemo adapter, we could try to replicate it here.

About the performance problem:
Please try to replicate the problem after getting rid of the slider.
If you just put a button on the page which calls "updateWInd(50)" do you still experience a delay of minutes? (we assume that you haven't modified the updateWInd function)
We tried with 30 items in a page and could see a delay of a couple of seconds. It seems unlikely that the delay can increase 60 times on a smaller machine, but this cannot be excluded. Do you have a chance to test your page on a faster machine?