Présentation

Comment faire un tri croissant ou décroissant de données et les afficher sous forme d'un histogramme.

Exemple

Dans l'exemple ci-dessous, il s'agit de points obtenus lors d'un concours...

RESULTATS DU CONCOURS

Script commenté

NB: les textes en rouge sont des commentaires à supprimer dans le code html

<script language="JavaScript"> <!-- debut du script

On déclare les variables et les tableaux:

var sherpa = new Array; Noms des concurrents
var result = new Array; les points obtenus par chacun
var nresult = new Array; deux autres tableaux pour le tri
var nsherpa = new Array;

var nb_elts=4; // nombre de concurrents, ici 4

function init(){ cette fonction contient les données

sherpa[1]="DUPOND Jean " Nom du premier concurrent
result[1]=85 son score
sherpa[2]="DURAND Alain" et ainsi de suite pour les 4
result[2]=57
sherpa[3]="LUPIN Arséne "
result[3]=69
sherpa[4]="Colette et Berthe LA VALLEE"
result[4]=62
}
init()

suit le corps du programme constitué d'une double boucle
for (var i=1;i<(nb_elts+1);i++){ pour chaque concurrent
for (var j=i+1;j<(nb_elts+1);j++){on teste les résultats des suivants un par un
if (result[j]<=result[i]) si son score est inférieure
{nresult[i]=result[j] on le met dans l'autre tableau
nsherpa[i]= sherpa[j]
shsec=sherpa[i] on récupére les données
shsec2=result[i]

sherpa[i]= sherpa[j] et on change son ordre dans le tableau
result[i]=result[j] la valeur de i devient celle de j
sherpa[j]= shsec et celle de j celle de i (vous suivez?)
result[j]=shsec2
}
else{
nsherpa[nb_elts]= sherpa[j] on récupére le nom du dernier, ici le gagnant
nresult[nb_elts]=result[j]} et son score

}}
document.write("<BR><BR><strong><font color='#000080'><p>Moyenne des scores obtenus</p></strong></font>")

on affiche les concurrents dans l'ordre du tri
for (var i=1;i<(nb_elts+1);i++){

document.write("<strong><p>"+sherpa[i]+" <BR>   ");
for (var j=1;j<(result[i]+1);j++){ la boucle affiche autant de fois que nécessaire une petite image, base de l'histogramme.

document.write('<img src="histo.gif" width="5" height="25" align="texttop">')
}

on affiche le score correspondant
document.write(" "+result[i]+" </p></strong>")
}
// -->// End </script> </p>

Téléchargez le script

Retour