JQuery UI: How to use the progressbar to make a horizontal bar graph?

LubluPravdu

New Member
I am trying to use the progress bar for a non-traditional purpose. I want to use the functionality to display a horizontal bar graph of two values retrieved from a database. My PHP/MySQL/JQuery:\[code\]// retrieve results for display$query = mysql_query(" SELECT furniture_purchases, electronics_purchases FROM sales WHERE store_id = $storeId ");$sales = mysql_fetch_array($query);$furniture = $ratings[0];$electronics = $ratings[1];echo ("<script type='text/javascript'> // display sales results $(document).ready(function() { $('div.furnitureBar').progressbar({ value: $furniture }); $('div.electronicsBar').progressbar({ value: $electronics }); }); </script>");\[/code\]My HTML:\[code\]<div class='furnitureBar'></div><div class='electronicsBar'></div>\[/code\]Now the problem is, say if 101 furniture items were sold, the progress bar for furniture will fill the entire space since 100 is the max value according to JQuery progressbar documentation: http://jqueryui.com/demos/progressbar/Instead I want the two values to form dynamically as comparison to one another, so if 101 furniture items were sold and 90 electronics items were sold, then both bars should be in the middle instead of it seeming like 100 is the max number of sales possible. In fact there is no limit to the max number of sales.I hope I make sense.
 
Back
Top