Bar Graph based on user selection

Hello,

What I'm trying to do uses PHP, JS and MySQL so I hope this is the best place for this post.

I've been looking for a way to build some kind of test results page. Let's say I have 20 tests and 15 competitors, all I want to do is let a user select one of the 20 tests and then show him (on the same page) the results all 15 competitors had in that particular test. This would only require some php programing and a simple mysql database.

But I also want to show next to every result a graph bar. This is the part that requires JS.

tomshardware has something similar to what I need: http://www.tomshardware.com/charts/2012-vga-gpgpu/01-3DMark11-A-Entry,2931.html

Is there any simple way to achieve this? Can anyone point me to a tutorial?

I've tried searching Google but didn't find anything close to what I need...

Thanks !

 

bump, anyone? Just a link will do, I don't need to be spoon fed. Thanks.

 

Do you need help with the whole thing or just with the bar graph? Also I don't see why you would need to use JS to do the bar graph thing.

 

Thanks for replying, I need help for the whole thing....

Every php graph I saw on the Internet was based on JS... so I assumed JS is needed.

 

Do you have any experience with php and mysql?

Maybe I miss understood something because those bars are pretty simple to make.
Here's a quick example:

.bar_wrapper{
width: 200px;
height: 20px;
border: 1px solid black;
}
.bar{
text-align:center;
color: white;
height: 20px;
background: red;
float: left;

Code (markup):

<div class="bar_wrapper">
	<span class="bar" style="width:50px;">50</style>
</div>

<br>

<div class="bar_wrapper">
	<span class="bar" style="width:100px;">100</style>
</div>

<br>

<div class="bar_wrapper">
	<span class="bar" style="width:200px;">200</style>
</div>

Code (markup):

Is this what you meant or..?

 

PHP yes, mysql not so much...I can create a table and pull some data but that's all mysql I know.

 

Here's a pretty good beginners tutorial:
http://www.w3schools.com/php/php_mysql_intro.asp

 

The actual bars aren't the problem. Based on the results from mysql the bars are dynamically built with JS, that's pretty easy to do.

The thing I don't know how to do is how do I get the results from MYSQL and display them based on the user selection without reloading the page.

IE: there's 15 guys and each of them does 10 tests. I want a user to select from a dropdown of tests the one they like to see results for. After he makes the selection I want the results (15 results) returned for each guy for that particular test. Then making the graph bar is fairly easy to do...

When it comes to PHP I know what a code does, I know to write functions etc. I know how to do that selection thing but I only know to do it with a page reload...I'm at a loss with mysql.

I guess an iframe should do just fine. Hope you can help. Thank you !

 

I recommend that you use jQuery's ajax() function:
http://api.jquery.com/jQuery.ajax/

EDIT:
Is this what you mean?
http://ytdl.org/dp/ajax_example/