#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    6
    Rep Power
    0

    Draw a red line in an mvc style html table at a certain heighth with a label.


    On a bootstrap based web page I'm displaying the following table:



    This was generated with the following code:

    Code:
    <div class="row">
       <div class="col-lg-12">
          <div class="table-responsive">
             <table class="table table-bordered table-hover table-striped">
                <thead>
                   <tr>
                      <th class="text-right success">Count</th>
                      <th class="text-right success">Lower</th>
                      <th class="text-right success">Upper</th>
                      <th class="text-right success">Price</th>
                      <th class="text-right success">Cost</th>
                   </tr>
                </thead>
                <tbody>
                   @foreach (var dataRow in staffelData)
                   {
                      var differenceWithUpper = 0;
                      if (dataRow.Upper.HasValue)
                      {
                         differenceWithUpper = countValue - dataRow.Upper.Value;
                      }
                      else
                      {
                         differenceWithUpper = -1;
                      }
                      var cost = 0.0;
                      var inScope = 0;
    
                      if (differenceWithUpper >= 0)
                      {
                         inScope = dataRow.Upper.Value;
                      }
                      else
                      {
                         if (countValue >= dataRow.Lower.Value)
                         {
                            inScope = countValue - dataRow.Lower.Value;
                         }
                      }
    
                      cost = inScope * Decimal.ToDouble(@dataRow.PnrFee);
    
                      <tr>
                         <td class="text-right fit">@pnrsInScope</td>
                         @if (@dataRow.Lower.HasValue)
                         {
                            <td class="text-right fit">@dataRow.Lower.Value</td>
                         }
                         else
                         {
                            <td class="text-right fit">N/A</td>
                         }
                         @if (@dataRow.Upper.HasValue)
                         {
                            <td class="text-right fit">@dataRow.Upper.Value</td>
                         }
                         else
                         {
                            <td class="text-right fit">N/A</td>
                         }
                         <td class="text-right fit">@dataRow.Fee @dataRow.Currency</td>
                         <td class="text-right fit">@cost @dataRow.Currency</td>
                      </tr>
                   }
                </tbody>
             </table>)
          </div>
       </div>
    </div>
    I still need 2 add 1 feature though: I have to display an average value in the same table. I was thinking to draw a line @ the level in the table the average can be found.

    Could anyone here explain me how to best get this done
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2007
    Posts
    6
    Rep Power
    0
    I made a small error in my original post.

    The idea is not to display the average value, but an estimated, expected value based on the average.

    Say we have on average 25 orders per day then at day 10 I would expect 250 orders. This is the value I want to display as a thin red line on the table.

IMN logo majestic logo threadwatch logo seochat tools logo