CODEWITHSUNDEEP
phpjqueryhtmlcss
Marilee
Marilee

Reputation: 1598

Displaying a simple bar chart on website, nothing fancy

My page calculates the percentage of chance team X has to win against team Y. Instead of expressing this in a precentage I would like to display it in a bar graph (horizontal or vertical does not matter whatever is the easiest)

I have read in a previous question on stackoverflow that this is possible creating such a bar with just HTML and CSS but it did not quite answer my problem

Here is an image of what gets displayed on my page, after all selections from user has been made, and all variables calculated.

enter image description here

Now I would greatly appreciate it if someone can help me with an easy way of displaying the above image in a graph.

If it is not possible to keep it simple with just HTML and CSS, at-least could you tell me of a good graph plugin/package I could use.

Ill display some of my code that is relevant for displaying the bar, as the code is quite long, if you need more / different code please let me know.

//teamstrength1
    $teamstrength = ($teamstrength / 30 * 20);
    //teamstrength2
    $team2strength = ($team2strength /30 * 20);
    //add international experience for team1
    $teamstrength = $teamstrength + $internationalPlayersT1;
    //add international experience for team2
    $team2strength = $team2strength + $internationalPlayersT2;
    //add players which is better for team 1 
    $teamstrength = $teamstrength +  $bettert1;
    //add players who is better for team2
    $team2strength = $team2strength + $bettert2;
    //add homefield advantage
    $teamstrength = $teamstrength + 5;

    //echo team chances
    echo '<h3>team1 chance '.$teamstrength.'</h3>'; 
        echo'<br>';
    echo '<h3>team2 chance '.$team2strength.'</h3>';

Thank you in advance to all the helpfull contributors on this great website

Sincerely Lee

Upvotes: 2

Views: 1123

Answers (3)

Tanay Karnik
Tanay Karnik

Reputation: 434

Instead of using a bar graph plugin/package you can use your own bar graph creator function in php like this (it's okay if you copy and paste this directly) :

function draw_bar_graph($width, $height, $data, $max_value, $filename) {
    // Create the empty graph image
    $img = imagecreatetruecolor($width, $height);

    // Set a white background with black text and gray graphics
    $bg_color = imagecolorallocate($img, 255, 255, 255);       // white
    $text_color = imagecolorallocate($img, 255, 255, 255);     // white
    $bar_color = imagecolorallocate($img, 0, 0, 0);            // black
    $border_color = imagecolorallocate($img, 192, 192, 192);   // light gray

    // Fill the background
    imagefilledrectangle($img, 0, 0, $width, $height, $bg_color);

    // Draw the bars
    $bar_width = $width / ((count($data) * 2) + 1);
    for ($i = 0; $i < count($data); $i++) {
      imagefilledrectangle($img, ($i * $bar_width * 2) + $bar_width, $height,
        ($i * $bar_width * 2) + ($bar_width * 2), $height - (($height / $max_value) * $data[$i][1]), $bar_color);
      imagestringup($img, 5, ($i * $bar_width * 2) + ($bar_width), $height - 5, $data[$i][0], $text_color);
    }

    // Draw a rectangle around the whole thing
    imagerectangle($img, 0, 0, $width - 1, $height - 1, $border_color);

    // Draw the range up the left side of the graph
    for ($i = 1; $i <= $max_value; $i++) {
      imagestring($img, 5, 0, $height - ($i * ($height / $max_value)), $i, $bar_color);
    }

    // Write the graph image to a file
    imagepng($img, $filename, 5);
    imagedestroy($img);
  }

Upvotes: 2

Cup of Java
Cup of Java

Reputation: 1808

I hope I have understood your question correctly, if you want to show percentage with with html and css you can use php to change the css of a div, showing it like a bar graph, I have a simple example below

Code

<!DOCTYPE html>
<html>
<head>
<style>
#container{
background-color:grey;
width:500px;
height:400px;
position:absolute;
}
#team1{
width:<?php 
$team1 = 52.6 * 4; //Used a multiplier factor of four to increase size of bar 
echo $team1."px"; ?>;
height:100px;
margin-top:50px;
background-color:blue;
}
#team2{
width:<?php 
$team1 = 41.6 * 4;
echo $team1."px"; ?>;
height:100px;
margin-top:50px;
background-color:blue;
}
.percent{
color:white;
}
</style>
</head> 
<div id="container">
<div id="team1">
<span class="percent">Team 1 Percentage 52.6%</span>
</div>
<div id="team2">
<span class="percent">Team 2 Percentage 41.6%</span>
</div>
</div>
<body>  
</body> 
</html>

Upvotes: 1

Chen-Tsu Lin
Chen-Tsu Lin

Reputation: 23244

Bootstrap have simple progress bar component that let you can easy add a bar in your website.

Refer: http://getbootstrap.com/components/#progress

And you can customize your bootstrap source only include progress bar here: http://getbootstrap.com/customize/

Include js file add do like this:

echo '<div class="progress">';
echo '<div class="progress-bar" role="progressbar" aria-valuenow="' . $teamstrength .'" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">'
echo $teamstrength; 
echo '</div>'; 
echo '</div>';

If this is not what you want, you should have more details on your question.

Upvotes: 0

Related Questions