Comparing previous value with new value and changing color
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.
Comparing previous value with new value
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.