JQuery UI: Comment utiliser la barre de progression pour créer un graphique à barres horizontal?

Question

J'essaie d'utiliser la barre de progression dans un but non traditionnel. Je veux utiliser la fonctionnalité pour afficher un graphique à barres horizontales de deux valeurs extraites d'une base de données.

Mon PHP/MySQL/JQuery:

// 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>"); 

Mon HTML:

<div class='furnitureBar'></div> 
<div class='electronicsBar'></div> 

Maintenant, le problème est, disons que 101 éléments de mobilier ont été vendus, la barre de progression pour le mobilier remplira l'ensemble l'espace depuis 100 est la valeur maximale selon la documentation de la barre de progression JQuery: http://jqueryui.com/demos/progressbar/

Je veux plutôt que les deux valeurs se forment dynamiquement par rapport à l'autre, s o si 101 articles de meubles ont été vendus et 90 articles électroniques ont été vendus, alors les deux barres devraient être au milieu au lieu de cela il semble que 100 est le nombre maximum de ventes possibles. En fait, il n'y a pas de limite au nombre maximum de ventes.

J'espère que j'ai du sens.

Answer 1

Vous devez mettre à l'échelle les valeurs afin qu'elles s'adaptent. Exemple:

$furniture = $ratings[0]; 
$electronics = $ratings[1]; 

$max = max($furniture, $electronics); 
if ($max > 100){ 
    $furniture *= (100/$max); 
    $electronics *= (100/$max); 
} 

Cet exemple détermine si l'un des numéros est supérieur à 100, ce qui entraînerait un dépassement de capacité (pour la barre de progression). Si c'est le cas, il calcule un rapport tel que le nombre le plus élevé est maintenant 100. Ensuite, il ajuste le second nombre en conséquence. Si vous avez besoin d'une valeur entière, arrondissez simplement ou appliquez un cast (int) aux valeurs.

Les mathématiques derrière:

Disons que $furniture est 104 et $electronics est 76. Comme vous l'avez souligné, 104 ne fonctionnera pas parce que les progrès jQuery UI barres valeurs de support seulement jusqu'à 100.

104 est supérieur à 76, donc nous calculons le ratio pour ajuster les valeurs comme ceci: 100/104 = 0.961538462. Alors;

0.961538462 * 104 = 100

0.961538462 * 76 = (arrondi) 73

Answer 2

Ceci est réellement fait très facilement avec des tables qui sont remplis à votre pourcentage souhaité. En termes de performances, il va battre le pantalon de l'option Jquery.

Un exemple d'un site que je l'ai fait:

<td> 
    <div id="graph_grey"> 
    <div id="graph_self" style="width:62%;"></div> 
    </div> 
</td>