I am creating a basic website with Microsoft WebMatrix. I have an array of float values in PHP. I want to use the values to create a bar chart in CSS (e.g. A value of 50.0 creates a bar of height 50% of 300px). This is the entirety of the code I am using since there's not that much of it. When I run it in a browser (Google Chrome or Internet Explorer), it writes the first echo statement but it does not produce any bars. How do I edit my code so that the bars are drawn?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bar chart</title>
<style>
.bar
{
color: #00ff21;
width: 30px; //This defines the colour and width of the bars
}
</style>
</head>
<body>
<?php
echo("<p>This is my bar chart!</p>");
$values = array(50.0, 20.0, 35.0, 70.0); //This is the array of float values
for ($i = 0; $i < count($values); $i++) //This loop should create a bar for each element in the array
{
$currentHeight = 300 * $values[$i] / 100.0; ?>
<div class="bar" style="height: <?php echo($currentHeight); ?> "></div>
<?php
}
?>
</body>
So I am not very familiar with css, but you have some arguments missing from your div element for it to work.
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?> border: solid; display: inline-block;"></div>
You echoed the height without adding px recognition and you didnt give it solid border, so it wouldn't have displayed out in web browser anyway.
Also you can add border and display values inside style tags, but you also need to have empty height selector in there,im not entirely sure why it is that way but the code would look like that:
.bar
{
color: #00ff21;
width: 30px; //This defines the colour and width of the bars
height: ;
display: inline-block;
border: solid;
}
<div class="bar" style="height: <?php echo $currentHeight . "px;"; ?>"></div>