Results 1 to 5 of 5
  1. #1
    Power Member
    Join Date
    Sep 2013
    Location
    Coimbatore
    Posts
    121

    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.
    Last edited by rvkvino; September 20th, 2013 at 10:34 AM.

  2. #2
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    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:



    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)


  3. #3
    Power Member
    Join Date
    Sep 2013
    Location
    Coimbatore
    Posts
    121

    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.

  4. #4
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    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/cl...tCellAttribute)


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

  5. #5
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT +1. The time now is 11:32 AM.