creating simple bar chart from css and php

Question

I have this problem which Im really struggling with, in theory it should be simple enough, yet i fail to correctly implement it. Perhaps my logic is wrong in approaching this...?

The Challenge

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

example some users vote:

Match 1 round 2: 5 users voted liverpool to win, 3 users selected Manu to win
Match 2 round 2: 3 Users voted for Arsenal to win, 5 users voted for Chelsea

and so on

:

What I want to do

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

something like this:

My Implementation

I have 2 tables 1 for the events, called events and the other table is for recording the votes called multiple_picks

Consider the following query

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

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

The Query Produces the following result

IMPORTANT TO NOTE

1.As can be seen from the table every 2nd row is a new game!

2.Also 15 players have entered the pool so each match equates to 15 votes

My Logic

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

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

My Execution

 $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

MY Problem

This is how part of the end result looks, which is kinda right but it never gets to the 2nd if statement else if($t1 != $pick) , thus, the container div never gets closed...so I must have a logical error!

Thank you very much for taking the time to read, any help appreciated.

Side Note: Please don't scrutinise me for using depreciated mysql_query() statement, I started the "program" this way, so I might as well finish it this way and then start changing it from the start

@freestock.tk I have uploaded part of HTML output on an image above, for now i'm just doing the chart testing on a blank page, with the php generating the HTML output — Tim C
– Tim C, Commented Mar 15, 2016 at 2:34
Few things I can see, you're assigning $t1 = $pick before your if statements. On your first else if you're assigning the $t1 variable instead of doing a comparison $t1 == $pick, which will always evaluate to true because of the initial assignment of $t1 = $pick — Bankzilla
– Bankzilla, Commented Mar 15, 2016 at 2:35

Bankzilla · Accepted Answer · 2016-03-15 03:04:12Z

1

There was a few issues but you mostly had it. Percentage only needs to be calculated once as each loop is a new entry. You were assigning $t1 = $pick which means that the last else if was never going to be reached. Also you had the background-color: green outside of the style bracket, so it wasn't rendering the background colour.

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's 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

answered Mar 15, 2016 at 3:04

Bankzilla

2,0963 gold badges25 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim C Over a year ago

awesome thank you so much!, for the help and advice!

Collectives™ on Stack Overflow

creating simple bar chart from css and php

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related