Using Bootstrap Progress bar to Display mysql data in Multiple progress bars (3 bars)

Question

I have an Issue page which generate these numbers from mySQL. These numbers keeps changing based on the issue raised, on-hold or closed.

$opened - 8  
$onHold - 3  
$completed - 60

I want to place them in the Bootstrap progress bar. How do i do that.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
</div>

UPDATED
This explains https://stackoverflow.com/a/46082290/5413283 a single bar, i am looking for 3 bars.

here's what i tried

<section>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: <?php echo $completed; ?>%;" aria-valuenow="<?php echo $bal; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $completed; ?></div>
        <div class="progress-bar bg-danger text-right pr-2" role="progressbar" style="width: <?php echo $opened; ?>%;" aria-valuenow="<?php echo $output; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $opened; ?></div>
        <div class="progress-bar bg-warning text-right pr-2" role="progressbar" style="width: <?php echo $onHold; ?>%;" aria-valuenow="<?php echo $output; ?>" aria-valuemin="0" aria-valuemax="100"><?php echo $onHold; ?></div>
    </div>
</section>

Here's the output
how do i fill the progress bar (without the gray area)

mickmackusa · Accepted Answer · 2018-11-04 14:35:35Z

0

To write the php variables into you html, you can use php tags and echo the variables in the desired locations.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width:<?php echo $opened; ?>%"></div>
    <div class="progress-bar" role="progressbar" style="width:<?php echo $onHold; ?>%"></div>
    <div class="progress-bar" role="progressbar" style="width:<?php echo $completed; ?>%"></div>
</div>

We don't know if those values are percentage values or if some calculation is required to prepare the data.

Update: To fill the full meter to 100% using the 3 values, you will need to find the factor that will take the total to 100%. Like this: (Demo)

$opened = 5;
$onHold = 22;
$completed = 1;
$total_of_3 = $opened + $onHold + $completed;
$factor =  100 / $total_of_3;

echo "New opened = " , $opened * $factor , "\n";
echo "New onHold = " , $onHold * $factor , "\n";
echo "New completed = " , $completed * $factor;

Output:

New opened = 17.857142857143
New onHold = 78.571428571429
New completed = 3.5714285714286

Of course, if you want to be exactly 100% on the nose, or you want to do some rounding of numbers, you can calculate (and round) $new_opened and $new_onHold, then just use 100 - $new_opened + $new_onHold to determine the perfect $new_completed.

edited Nov 4, 2018 at 14:35

answered Nov 4, 2018 at 4:24

mickmackusa♦

49.2k13 gold badges98 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dexter Over a year ago

Those are mysql COUNT(), Do i have to convert into percentage before output on the style.width ? Something like the one mentioned in the reference link [total active=1] / [total records] * 100 = [percent from 0 - 100]

mickmackusa Over a year ago

Well, the meters are out of 100, so yes you will need to perform some calculations.

Dexter Over a year ago

The one mentioned in the reference link works for 2 bar. But is there a way to get the output for three. Not sure if this make sense..

Dexter Over a year ago

I have already tried your approach. I have updated the code with the result.

mickmackusa Over a year ago

I misunderstood your edit at first. Have a look at my edit.

Ramesh Navi · Accepted Answer · 2018-11-04 15:01:48Z

A progress bar is to show what percent of a task is completed. To do this, you will need current value, floor and ceiling values.

If you can get such numbers, use a progress bar or you should use something like the bootstrap badge with number count.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<button type="button" class="btn btn-primary">
  Tasks <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>
    
</body>
</html>

Collectives™ on Stack Overflow

Using Bootstrap Progress bar to Display mysql data in Multiple progress bars (3 bars)

here's what i tried

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

here's what i tried

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related