Creating a simple histogram from css and php

I have this problem that I am really struggling with, theoretically it should be quite simple, but I can not implement it correctly. Perhaps my logic is erroneous in approaching this ...?

Task

I have a simple web application in which users vote who will win a sporting event in a tournament, each round has many matches up to 8.

For example, some users vote:

  • Match 1 round 2: 5 users voted for Liverpool victory, 3 users chose Manu to win
  • Match 2: round 2: 3 Voted for Arsenal for the victory, 5 people voted for Chelsea

etc.

:

What i want to do

I want to display the number of votes for each team in each match in a simple graphical css diagram

something like that:

enter image description here

My implementation

I have 2 tables 1 for events called events, and another table is for recording voices calledmultiple_picks

Consider the following query

(Note pickNr refers to the number of votes received by the team )

SELECT multiple_picks.pick, multiple_picks.round_game_nr, COUNT(multiple_picks.round_game_nr) as pickNr ,events.event_id, events.team1, events.team2, events.round, events.tournament
            From multiple_picks
            JOIN events
            ON multiple_picks.event_id = events.event_id
            WHERE multiple_picks.round = '$round' AND multiple_picks.tournament ='$tour'
            GROUP BY pick
            ORDER BY round_game_nr

Request Gets the following result:

enter image description here IMPORTANT FOR REMARK

1. As you can see from the table, every second row is a new game!

2. Also, 15 players entered the pool, so each match is equal to 15 votes.

My logic

  • Get the number of votes for team A and team B in each match.
  • Make a percentage of votes for team A and team B in each match example ( Highlanders = (9/15)*100 = 60%)
  • Show every match percentage in div- divfor team 1<div style="width:'.$t1Votes.'; height:25px; float:left">

div 2 <div style="width:'.$t2Votes.'; height:25px; float:right">

 $sql    = "SELECT multiple_picks.pick, multiple_picks.round_game_nr, COUNT(multiple_picks.round_game_nr) as pickNr ,events.event_id, events.team1, events.team2, events.round, events.tournament
            From multiple_picks
            JOIN events
            ON multiple_picks.event_id = events.event_id
            WHERE multiple_picks.round = '4' AND multiple_picks.tournament ='Super Rugby'
            GROUP BY pick
            ORDER BY round_game_nr";
    $result=mysql_query($sql);
    while($row = mysql_fetch_array($result)){
        //get vars
        $rgm = $row['round_game_nr']; //not important for example
        $t1 = $row['team1']; //team 1
        $t2 = $row['team2']; //team 2
        $pick =$row['pick']; //selected team
        $pickCount = $row['pickNr']; //number votes

        $t1 = $pick;
        if($pick == "Draw"){
            //skip draws for now
        }
        else if($t1 =$pick ){
            echo'<div id="container">';//opem container
            $percentage1 = ($pickCount / 15) * 100;
            echo'<div class="t1" style=" float:left; height:25px; background-color:red; width:'.$percentage1.'%">'.$pick.'</div>';  
        }//else if
            else if($t1 != $pick){
                $percentage2 = ($pickCount / 15) * 100;
                echo'<div class="t2" background-color:green; style=" float:right; height:25px;  width:'.$percentage2.'%">'.$pick.'</div>';
                echo'</div>';//container
                echo'<div style="clear:">';
            }//else if

    }//while

, , if statement else if($t1 != $pick), container div ... !

enter image description here

enter image description here

, , , .

: , mysql_query(), "", ,

+4
1

, . , . $t1 = $pick, , else if . , background-color: green , .

while($row = mysql_fetch_array($result)){
    //get vars
    $rgm = $row['round_game_nr']; //not important for example
    $t1 = $row['team1']; //team 1
    $t2 = $row['team2']; //team 2
    $pick = $row['pick']; //selected team
    $pickCount = $row['pickNr']; //number votes

    // Since it looping for each entry you only need to calculate the total percentage once
    $percentage = ($pickCount / 15) * 100;

    if($pick == "Draw") {
        //skip draws for now
        continue;
    }
    else if($t1 == $pick ) {
        echo'<div id="container">';//opem container
        echo'<div class="t1" style=" float:left; height:25px; background-color:red; width:'.$percentage.'%">'.$pick.'</div>';  
    }//else if
        else if($t1 != $pick) {
            echo'<div class="t2" style="background-color:green; float:right; height:25px;  width:'.$percentage.'%">'.$pick.'</div>';
            echo'</div>';//container
            echo'<div style="clear:">';
        }//else if

}//while
+1

All Articles