Comparing previous value with new value and changing color

rvkvino

In LightStreamer Demo i have seen the stock list updating. It's working fine and updating with red and green color based on the rate increase / decrease.
They used the bellow code,

<td><div data-source="lightstreamer" data-field="last_price">-</div></td>
var fieldsList = ["last_price", "time", "pct_change", "bid_quantity", "bid", "ask", "ask_quantity", "min", "max", "ref_price", "open_price", "stock_name", "item_status"];
var lastPrice = info.getChangedFieldValue("last_price");
if (lastPrice !== null) {
var prevPrice = dynaGrid.getValue(key,"last_price");
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor");
} else {
info.setAttribute(redColor,cold,"backgroundColor");
}
} else {
info.setAttribute(greenColor,cold,"backgroundColor");
}

You are using "last_price" in single field only. But updating for all the rows. How is it happening? Where you are doing this whether in this above code or creating data adapter in server.

I'm using java script client as,
<tr>
<td class="rate-title"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="stock_name">Loading...</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="buy_price">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="sell_price">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="ltp">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="net_change">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="tot_buyqty">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="tot_sellqty">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="open">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="high">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="low">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item1" data-field="close">-</div></td>
</tr>
<tr>
<td class="rate-title"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="stock_name">Loading...</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="buy_price">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="sell_price">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="ltp">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="net_change">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="tot_buyqty">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="tot_sellqty">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="open">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="high">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="low">-</div></td>
<td class="rate"><div data-source="lightstreamer" data-grid="stocks" data-item="item2" data-field="close">-</div></td>
</tr>

.
.
.
.

I used following code to achieve this,
grid.addListener({
onVisualUpdate: function(key,info,domNode) {
if (info == null) {
//cleaning
return;
}
var cold = (key.substring(4) % 2 == 1) ? "" : "";
//info.setAttribute("yellow", cold, "backgroundColor");
domNode.style.backgroundColor = cold;

var lastPrice = info.getChangedFieldValue("buy_price");
if (lastPrice !== null) {
var prevPrice = grid.getValue(key,"buy_price");
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor");
} else {
info.setAttribute(redColor,cold,"backgroundColor");
}
} else {
info.setAttribute("#000000",cold,"backgroundColor");
}
formatDecimalField(info, "buy_price");
}
});
But it changing color for single field.
How can i check each field value and update the background colors.

Mone

Hi,

The setAttribute method will apply the change to all of the fields updating at once; Styles for the fields not changing with the last update will not change.

If you modify your code like this you will see a list of the fields that are going to be highlighted printed on the browser console:

[SYNTAX=JS][...]
if (lastPrice !== null) {
console.log("Fields that will be highlighted with this update:");
info.forEachChangedField(function(fieldName,val) {
console.log(fieldName);
});

var prevPrice = grid.getValue(key,"buy_price");
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor ");
} else {
info.setAttribute(redColor,cold,"backgroundColor") ;
}
}
[...][/SYNTAX]

If the fields you would like to highlight are not on the printed list you may force the highlight using the setCellValue method (otherwise it should already work, let me know if it doesn't)

[SYNTAX=JS]info.setCellValue(fieldToHighlight,grid.getValue(key,fieldToHighlight))[/SYNTAX]

rvkvino

Yes you are correct it helped me lot, Thank you so much.
I used like bellow

info.forEachChangedField(function(fieldName,val) {
var lastPrice = info.getChangedFieldValue(fieldName);
if (lastPrice !== null) {
var prevPrice = grid.getValue(key,fieldName);
if (!prevPrice || lastPrice > prevPrice) {
info.setAttribute(greenColor,cold,"backgroundColor");
} else {
info.setAttribute(redColor,cold,"backgroundColor");
}
} else {
info.setAttribute("#000000",cold,"backgroundColor");
}
formatDecimalField(info, fieldName);
});
It's working well.

Mone

Well that's not quite correct: the code as it is now will choose the style for the cells updating with the current update message based on the value of the last field parsed by forEachChangedField.
As an example if during the current update two fields changed, fieldA and fieldB and fieldA was updated from 1 to 2 while filedB was updated from 4 to 3 depending on which one is parsed first you will make both green or both red. It is possible that in your case you always have all higher or all lower values but still the code is doing useless work.
If you want to distinguish the color field by field you should use setCellAttribute calls instead of using setAttribute calls (see http://www.lightstreamer.com/docs/client_javascript_uni_api/VisualUpdate.html#setCellAttribute)

Also info.getChangedFieldValue(fieldName) is the same as the val parameter of the callback.

Mone

post moved here: http://forums.lightstreamer.com/showthread.php?3994-Light-streamer-for-Login-user