如何根据SQL列中的值扩展DIV宽度

Question

What I want to achieve:

So essentially when I upvote a client the green bar will increase and when I down vote the red bar increases.

I currently have it working so that when you up or down vote it submits a value to the database in 2 different columns: Positive and Negative. In the picture where the bars are, I currently have empty divs.

So how do I expand the div's based on the number of votes?

My clients.php:

<?php

$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
    echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

            "
            <div style='width: 35%;'>
                <div style='color: green;'></div>
            </div>

            <div style='display: inline-block; width: 5%;'>      
                <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
            </div>" .

                 "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

            "<div style='display: inline-block; width: 5%;'>
                <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
            </div>

            <div style='width: 35%;'>
                <div style='color: red;'></div>
            </div>

         </div> 
        <br />";
}

echo "</div>";

?>

Its the two divs with a width of 35% that will be the progress bars.

The columns should show based on a percentage of the total votes, so say there are 4 votes, 3 up 1 down, it shows 75% green, 25% red.

Answer 1

To do this you should take the positive and negative votes from your database and count the total number of votes.

Then you should find the percentage of both and set the width in you code. Remember to add an "%" and the end so the browser knows you're working with percentage.

If we take your example above, where 1 is down and 3 is up the math look like this:

y = (1/4)*100 = 25%

Here I have implemented it in your code:

$clientInfo = "SELCT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);

echo "<div style='width: 100%; display: inline-block;'>";

while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
  $positive = $client['positive'];
  $negative = $client['negative'];
  $total = ($positive+$negative);

  // Calculate width in percentage
  $positiveWidth = ($positive/$total)*100."%";
  $negativeWidth = ($negative/$total)*100."%";

  // The output
  echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" . 

    "
    <div style='width: $positiveWidth;'>
        <div style='color: green;'></div>
    </div>

    <div style='display: inline-block; width: 5%;'>      
        <span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
    </div>" .

         "<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" . 

    "<div style='display: inline-block; width: 5%;'>
        <span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
    </div>

    <div style='width: $negativeWidth;'>
        <div style='color: red;'></div>
    </div>

  </div> 
  <br />";
}

echo "</div>";