Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Illustration graphique d'un sondage  








Faire des sondages, c'est bien. Les représenter par des chiffres, c'est devenu banal... Les illustrer sous forme de graphique, c'est ce que cette page va vous apprendre !!! Sans connaissances particulières, juste un petit peu de HTML et un zeste de Javascript...

Un exemple sera le bienvenu : nous allons simuler que vous avez créé un sondage qui proposait aux internautes 3 possibilités (oui, non, ne sait pas), ces trois réponses étant illustrées ici par des couleurs (rouge, vert, bleu).

A la clôture de ce sondage, plutôt que d'afficher banalement les résultats (nombre de "oui", nombre de "non", nombre de "ne sait pas") avec des chiffres, faîtes-le graphiquement ! Rentrez ci-aprés les chiffres correspondant à votre sondage et cliquez sur "Exemple"...








Cet exemple est "interactif", ie, pour le tester à plusieurs reprises, vous n'avez qu'à modifier les chiffres directement, sans réactualiser la page...


Le code HTML est le suivant :


<form name="fondd">
<input type="text" size="5" name="chif1">
<input type="text" size="5" name="chif2">
<input type="text" size="5" name="chif3">
</form>

<table cellspacing="25"><tr><td valign="bottom">
<table><tr><td id="barre1" bgColor="red" width="20" height="1"></td></tr></table></td>
<td valign="bottom">
<table><tr><td id="barre2" bgColor="green" width="20" height="1"></td></tr></table></td>
<td valign="bottom">
<table><tr><td id="barre3" bgColor="blue" width="20" height="1"></td></tr></table></td>
</tr>
</table>

Le code Javascript que j'ai mis au point :

<script>
////////////////////////////////
//script de Honolulu
//http://triviere.free.fr
//merci de laisser la source //
var p1=document.fondd.chif1.value
var p2=document.fondd.chif2.value
var p3=document.fondd.chif3.value
var ensemble=parseInt(p1)+parseInt(p2)+parseInt(p3)
var ppa=Math.round((p1*100)/ensemble)
var ppb=Math.round((p2*100)/ensemble)
var ppc=Math.round((p3*100)/ensemble)

var arra=(p1*100)/ensemble
arra=Math.round(arra * 100)/100;
var arrb=(p2*100)/ensemble
arrb=Math.round(arrb * 100)/100;
var arrc=(p3*100)/ensemble
arrc=Math.round(arrc * 100)/100;

function retaille(){
NS4 = (document.layers)?1:0;
IE4 = (document.all)?1:0;
W3C = (document.getElementById)?1:0;
if (W3C){var bara = document.getElementById('barre1');}
else if (NS4){var bara = document.layers['barre1'];}
else {var bara = document.all['barre1'];}
if (W3C){var barb = document.getElementById('barre2');}
else if (NS4){var barb = document.layers['barre2'];}
else {var barb = document.all['barre2'];}
if (W3C){var barc = document.getElementById('barre3');}
else if (NS4){var barc = document.layers['barre3'];}
else {var barc = document.all['barre3'];}
if (ppa<1){ppa=1}
if (ppb<1){ppb=1}
if (ppc<1){ppc=1}
bara.height=ppa
barb.height=ppb
barc.height=ppc
}
retaille()
</script>

Et pour la légende de votre graphique :

<script>document.write(arra+"% ")</script>
<script>document.write(arrb+"% ")</script>
<script>document.write(arrc+"% ")</script>

Si vous souhaitez obtenir des explications plus précises sur ce script, ou si vous voulez l'adapter, intervenez directement sur le forum...