Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Need help with PHP Progress bar using a percentage

I am trying to use the progress bar to display how long a user has left in a subscription. I've looked around quite a bit but cannot find a way to use a date to control the css %

http://jsfiddle.net/vjNpj/1298/

I am displaying users account expiration with this code

<?php
$session =& JFactory::getSession();
echo $session->get('exp_date');?>

and it displays MM/DD/YYYY

Does anyone know how this can be achieved?

I know I need to find the percentage between the two dates but then feeding that into the css seems confusing.

8 Answers

Hi Mason,

If you're looking for % between 2 dates, you can do:

$time1 = strtotime( $date1 ); // earlier date

$time2 = strtotime( $date2 ); // late date

$timeBetween = strtotime( $date3 ); // some date in between

$denominator = $time2 - $time1;

$numerator = $timeBeween - $time1;

$percentage = 100%$numerator/$denominator;

As a rough starting point?

thanks andrew. this is where I get stuck.

The dates display in a MM/DD/YYYY format. Lets just say the account expiration is next week for simplicities sake.

Todays date : 03/04/2013 Expiration Date : 03/11/2013

so $date1 would be some code for "today" and $date2 probably uses my session variable in joomla called "exp_date"

I'm assuming next I get the $percentage after the math and I then plug that into this

progressbar div {

   background-color: #99cc66;
   width: 50%; 
   height: 20px;
   border-radius: 10px;
}

I am still trying to connect the dots with all of this but would be awesome if I could get it working

Hi Mason,

If you use the format above, you can change the date to a useful date format for difference calculations. Calculating date differences in the format above will be difficult unless you convert it to year-month-day format first.

I think the way you've defined $date1 and $date2 is right and the CSS idea sounds right too.

Can you convert the dates in the code you're in?

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

Once you figure out the percentage you want filled, you can set that on the HTML element directly:

<div id="progressbar">
      <div style="width: 60%;"></div>
</div>
Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

Hey @Mason, Have you made any progress (no pun intended!) on this? I've been trying to think of the PHP code you need to generate the percentage, but I'm unclear what the percentage is based upon. If you have two dates -- let's March 1 as the start date and March 31 as the expiration date -- what's the percentage? I feel like we need a third date or some other piece of data to calculate a percentage based on that. Could you provide some additional details?

Our users subscribe to our services much like Team Treehouse. I am trying to create a bar that represents how many days a user has left (and eventually change the green to red if below 10 days). I think the 3rd number would be the days remaining between the two dates.

like this http://i.imgur.com/53PKgP8.png

ps. thanks for the additional follow up randy, it means a lot to me that you'd take the time to do so.

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher

Oh, I got it. The third date is the current date! :~)

The easiest way to work with dates when doing calculations like this is to use the Unix timestamp format. (This is the number of seconds from the end of December 31, 1969 to the current date. It sounds a little crazy, but it's pretty standard and easy to use to calculate date differences. I like to look at UnixTimestamp.com to see the current time: 1,362,618,280.)

You can get the date in this format using the strtotime (or "string to time" function) like this:

<?php
    $date1 = strtotime("March 1, 2013 12:00 AM");
    $date2 = strtotime("March 31, 2013 11:59 PM");
    $today = time();
?>

Once you have those dates in number of seconds, you'll need to do some math to calculate the percentage:

<?php
    $num = $today - $date1;
    $den = $date2 - $date1;
    $percentage = ($today - $date1) / ($date2 - $date1) * 100;
?>

Then you can add that percentage to the HTML element as an inline style:

<div id="progressbar">
    <div style="width: <?php echo $percentage; ?>%;"></div>
</div>

Does that all make sense? Getting closer?

Othneil Drew
Othneil Drew
22,681 Points

Hey, I was also trying to accomplish this. Here's what I found that worked.

<?php

function calculatePercentage ($start, $end) {
     $start = new DateTime($start);
     $end = new DateTime($end);
     $today = new DateTime('now');

     $total = $start->diff($end);
     $current = $start->diff($today);

      return $percent_completed = round($current->days / $total->days * 100, 1);
}

?>