How to create progress bar to show calories left for user to burn to reach their goal

[mal14]

I'm making a calories burned calculator which links to goals the user has made.

 

I want to create a progress bar that updates when the user clicks a button that shows how many calories the user has yet to burn in order for them to reach their goal.

 

I've stored the amount of calories burned for each activity the user inputs.
The users goals are set in either lbs or kg, so I'm not sure how I can set a value for these units. 

 

Also, I'm not sure how I should calculate the calories left to burn.

 

I've looked online, however can't find anything that relates to how to made a progress bar with data from an sql database.

 

Database: 'registration' Table: 'tracklog' and 'goal'

 

Any help would be much appreciated!!!

Edited February 16, 2017 by Psycho

[requinix]

The progress bar would be the number of calories burned so far compared against the total number of calories you estimate they need to burn, right? That's easy enough to do on a page so long as you can come up with those two numbers - really, a percentage. The only question for this part is what you want the progress bar to look like.

 

Calculating the calories to burn is harder. You need to do some research about this because there is no simple conversion rate between calories and weight lost.

[mal14]

Yeah that's right! 

I want the progress bar to show the shaded part to be the calories burned and the rest of the bar to be blank which represents the total lbs or kgs wanted to be worked off by the user.

 

I have all the data stored on my database - so the calories burned after each exercise and the weight wanting to be lost by each user in either lbs or kg.

[Barand]

How are you calculating the calories needed to burned from the target weight loss?

Edited February 16, 2017 by Barand

[mal14]

Well, I'm planning to set the weight units, as:

1 lb = 3,500 calories

1 kg = 7,700 calories

 

(^^ I'm unsure how to set these values)

 

From the activity and the time the user enters, the number of calories burned from that activity will be calculated.

Then I can take this value away from their set goal.

[requinix]

I want the progress bar to show the shaded part to be the calories burned and the rest of the bar to be blank which represents the total lbs or kgs wanted to be worked off by the user.

Showing calories in the first part and weight in the second doesn't make sense. Should be the same units for both: calories burned and remaining, or weight lost and remaining. Regardless, you need a percentage, and that requires having (if not showing) both numbers in the same units.

 

Do you have the code at a point where you have two variables, one for the amount of s done so far and another for the amount of s remaining to be done?

[Barand]

Given the target calories and calories to date, then this will give a simple progress bar

$bar_length = 400;
$bar_height = 20;

$target = 1000;                      // target calories need to burned off
$calories = 650;                     // calculated total burned off so far

echo progress_bar($bar_length, $bar_height, $calories, $target);            // output progress bar

function progress_bar($width, $height, $calories, $target)
{
    $bar = "<svg width='$width' height='$height' view_box='0 0 $width $height'>\n
            <rect x='0' y='0' width='$width' height='$height' fill='#CCC' />\n";
    // calc width of bar for calories already burned
    $cal_width = $calories * $width / $target;
    $bar .= "<rect x='0' y='0' width='$cal_width' height='$height' stroke='#ccc' fill='#3C3' />\n";
    $bar .= "</svg>\n";
    return $bar;
}

[mal14]

Showing calories in the first part and weight in the second doesn't make sense. Should be the same units for both: calories burned and remaining, or weight lost and remaining. Regardless, you need a percentage, and that requires having (if not showing) both numbers in the same units.

 

Do you have the code at a point where you have two variables, one for the amount of <unit>s done so far and another for the amount of <same unit>s remaining to be done?

 

When I said the blank part to show the lbs or kg, I meant for them to be converted into the total number of calories needed to be burned off.

I don't, requinix :/  I'm very new to this

[mal14]

 

Given the target calories and calories to date, then this will give a simple progress bar

$bar_length = 400;
$bar_height = 20;

$target = 1000;                      // target calories need to burned off
$calories = 650;                     // calculated total burned off so far

echo progress_bar($bar_length, $bar_height, $calories, $target);            // output progress bar

function progress_bar($width, $height, $calories, $target)
{
    $bar = "<svg width='$width' height='$height' view_box='0 0 $width $height'>\n
            <rect x='0' y='0' width='$width' height='$height' fill='#CCC' />\n";
    // calc width of bar for calories already burned
    $cal_width = $calories * $width / $target;
    $bar .= "<rect x='0' y='0' width='$cal_width' height='$height' stroke='#ccc' fill='#3C3' />\n";
    $bar .= "</svg>\n";
    return $bar;
}

Thank you for this!

How would I get the calories and the target (from lbs/kg into calorie form) from my sql database? 

[Barand]

We would need to know the structure of your tables to answer that

[mal14]

Database: registration

 

 

Tables...

 

users:

- id

- firstname

- surname

- dob

- height

- username

- email

- password

 

goal:

- id

- weightlost

- weightunit

- whenby

- userid

 

tracklog:

- id

- currentweight

- weightunit

- activitytime

- timeunit

- activity

-caloriesburned

- userid

[Barand]

Something like this

$userid = somevalue; // however you decide which user

$bar_length = 400;
$bar_height = 20;

$sql = "SELECT 
          SUM(caloriesburned) as calories_burned
          , CASE g.weightunit
              WHEN 'lbs' THEN 3500
              ELSE 7700
            END * weightlost as target_calories
        FROM goal g 
            INNER JOIN tracklog t USING (userid)
        WHERE userid = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute( [$userid] );
$res = $stmt->fetch();

echo progress_bar($bar_length, $bar_height, $res['calories_burned'], $res['target_calories']);

Edited February 16, 2017 by Barand

[mal14]

 

Something like this

$userid = somevalue; // however you decide which user

$bar_length = 400;
$bar_height = 20;

$sql = "SELECT 
          SUM(caloriesburned) as calories_burned
          , CASE g.weightunit
              WHEN 'lbs' THEN 3500
              ELSE 7700
            END * weightlost as target_calories
        FROM goal g 
            INNER JOIN tracklog t USING (userid)
        WHERE userid = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute( [$userid] );
$res = $stmt->fetch();

echo progress_bar($bar_length, $bar_height, $res['calories_burned'], $res['target_calories']);

I really appreciate you taking out time to help me!

 

I've tried applying this, however nothing comes up in my browser :/

[Barand]

Post your code

[mal14]

<?php


$con=mysqli_connect("localhost","root","password","registration"); 

if (mysqli_connect_errno()) 

{ 

    die("Failed to connect to MySQL: " . mysqli_connect_error()); 

}


$userid = $_SESSION[userid];


$bar_length = 400;

$bar_height = 20;


$sql = "SELECT 

          SUM(caloriesburned) as calories_burned

          , CASE g.weightunit

              WHEN 'lbs' THEN 3500

              ELSE 7700

            END * weightlost as target_calories

        FROM goal g 

            INNER JOIN tracklog t USING (userid)

        WHERE userid = $_SESSION[userid]";

$stmt = $pdo->prepare($sql);

$stmt->execute( [$userid] );

$res = $stmt->fetch();


echo progress_bar($bar_length, $bar_height, $res['calories'], $res['target_calories']);


mysqli_close($con);


?>

[Barand]

My code assumed a PDO connection. I have changed it to mysqli using a prepared statement.

$con=mysqli_connect("localhost","root","password","registration"); 
if (mysqli_connect_errno()) 
{ 
    die("Failed to connect to MySQL: " . mysqli_connect_error()); 
}


$bar_length = 400;
$bar_height = 20;

$sql = "SELECT 
          SUM(caloriesburned) as calories_burned
          , CASE g.weightunit
              WHEN 'lbs' THEN 3500
              ELSE 7700
            END * weightlost as target_calories
        FROM goal g 
            INNER JOIN tracklog t USING (userid)
        WHERE userid = ?";
$stmt = $con->prepare($sql);
$stmt->bind_param('i', $_SESSION[userid]);
$stmt->execute();
$stmt->bind_result($calories, $target);
$res = $stmt->fetch();

echo progress_bar($bar_length, $bar_height, $calories, $target);

[mal14]

 

My code assumed a PDO connection. I have changed it to mysqli using a prepared statement.

$con=mysqli_connect("localhost","root","password","registration"); 
if (mysqli_connect_errno()) 
{ 
    die("Failed to connect to MySQL: " . mysqli_connect_error()); 
}


$bar_length = 400;
$bar_height = 20;

$sql = "SELECT 
          SUM(caloriesburned) as calories_burned
          , CASE g.weightunit
              WHEN 'lbs' THEN 3500
              ELSE 7700
            END * weightlost as target_calories
        FROM goal g 
            INNER JOIN tracklog t USING (userid)
        WHERE userid = ?";
$stmt = $con->prepare($sql);
$stmt->bind_param('i', $_SESSION[userid]);
$stmt->execute();
$stmt->bind_result($calories, $target);
$res = $stmt->fetch();

echo progress_bar($bar_length, $bar_height, $calories, $target);

I've just tried this but nothing is being output to my browser again. Is there something missing?

[Barand]

The definition of the progress_bar function

 

EDIT: You need to turn on error reporting in your php.ini file

Edited February 16, 2017 by Barand

[mal14]

This error comes up...

 

PHP Fatal error:  Uncaught Error: Cannot pass parameter 2 by reference in /Applications/MAMP/htdocs/FitFab/track.html:244

Stack trace:

#0 {main}

  thrown in /Applications/MAMP/htdocs/FitFab/track.html on line 244

 

That refers to this line:

$stmt->bind_param('i', '$_SESSION[userid]');

[Barand]

Why have you added the quotes around $_SESSION['userid'] ?

[mal14]

Because I was getting this error before...

 

PHP Notice:  Use of undefined constant userid - assumed 'userid' in /Applications/MAMP/htdocs/FitFab/track.html on line 244

 

When I added the quotes the error didn't show up again

[Barand]

The quotes should be around the 'userid' bit.

[mal14]

When I do that these errors come up...

 

PHP Warning:  mysqli_stmt::bind_param(): Number of variables doesn't match number of parameters in prepared statement in /Applications/MAMP/htdocs/FitFab/track.html on line 244

 

PHP Fatal error:  Uncaught Error: Call to undefined function progress_bar() in /Applications/MAMP/htdocs/FitFab/track.html:249

Stack trace:

#0 {main}

  thrown in /Applications/MAMP/htdocs/FitFab/track.html on line 249

 

Line 249:

 

echo progress_bar($bar_length, $bar_height, $calories, $target);

[Barand]

I created some test data. Try this

session_start();
$_SESSION['userid'] = 2;          // your's is probably set already

$con=mysqli_connect($host,$username,$password,$dbname); 
if (mysqli_connect_errno()) 
{ 
    die("Failed to connect to MySQL: " . mysqli_connect_error()); 
}


$bar_length = 400;
$bar_height = 20;

$sql = "SELECT 
          SUM(caloriesburned) as calories_burned
          , CASE g.weightunit
              WHEN 'lbs' THEN 3500
              ELSE 7700
            END * weightlost as target_calories
        FROM goal g 
            INNER JOIN tracklog t USING (userid)
        WHERE userid = ?";
$stmt = $con->prepare($sql);
$stmt->bind_param('i', $_SESSION['userid']);
$stmt->execute();
$stmt->bind_result($calories, $target);
$res = $stmt->fetch();


function progress_bar($width, $height, $calories, $target)
{
    $bar = "<svg width='$width' height='$height' view_box='0 0 $width $height'>\n
            <rect x='0' y='0' width='$width' height='$height' fill='#CCC' />\n";
    // calc width of bar for calories already burned
    $cal_width = $calories * $width / $target;
    $bar .= "<rect x='0' y='0' width='$cal_width' height='$height' stroke='#ccc' fill='#3C3' />\n";
    $bar .= "</svg>\n";
    return $bar;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Sample Progress Bar</title>
</head>
<body>
    Calories burned to date : <?=$calories?><br>
    Target calories : <?=$target?><br>
    <?= progress_bar($bar_length, $bar_height, $calories, $target) ?>
</body>
</html>

[mal14]

I've just tried that

 

So the bar comes up and when I enter an activity to find out how many calories are burned(530) and save it to the database...

Calories burned to date : 
Target calories :

 

^^this comes up and the bar stays blank

Edited February 16, 2017 by mal14