1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
|
<html>
<head>
<style type="text/css">
*{font-family:verdana;font-size:10px;}
.bar{background-color:#FACD76;width:50px;margin-left:5px;padding:5px;float:left;text-align:center;font-weight:bold;color:#fff;}
.pourcent{color:#FAA500;width:50px;margin-left:5px;padding:5px;float:left;text-align:center;font-weight:bold;}
hr{visibility:hidden;clear:left;}
#graph{}
#libelleTG{position:absolute;top:0;left:0;background-color:#fff;border:1px solid #FAA500;color:#FAA500;font-weight:bold;}
#libelleTG span{display:block;padding:5px;}
.hidden {display:none;}
.visible {display:block;}
</style>
<script type="text/javascript">
function sortNumber(a, b){
return a - b;
}
function pourcentage(nb,total) {
if(total==0) {
var multi=0;
} else {
var multi=100/total;
}
var resultat= Math.round(nb*multi);
return resultat;
}
function graph(libelle,valeur,pas) {
document.getElementById('graph').innerHTML='<div id="echelle"></div>'
var nbCell=libelle.length;
var largeur=(nbCell*65)+6;
document.getElementById('graph').style.width=largeur+'px;';
var total=0;
for(i=0;i<nbCell;i++){
total+=valeur[i];
}
valeurT=valeur.sort(sortNumber);
var max=valeurT[nbCell-1];
for(i=0;i<nbCell;i++){
var hauteur=valeur[i]*pas
var marge=((max+4)-valeur[i])*pas;
var points='';
if(libelle[i].length>15) { points='...'; }
var libelle2=escape(libelle[i]);
document.getElementById('graph').innerHTML+='<div class="bar" onmouseover="libelleTGH(\''+libelle2+'\',\'bar'+i+'\');" onmouseout="libelleTGO(\'bar'+i+'\');" id="bar'+i+'" style="height:'+hauteur+'px;margin-top:'+marge+'px;">'+libelle[i].substr(0,15)+points+'</div>';
}
document.getElementById('graph').innerHTML+='<hr />';
for(i=0;i<nbCell;i++){
document.getElementById('graph').innerHTML+='<div class="pourcent" >'+valeur[i]+'%</div>';
}
document.getElementById('graph').innerHTML+='<br /><br />';
}
function libelleTGH(libelle,id,event){
document.getElementById('libelleTG').className='visible';
document.getElementById('libelleTG').innerHTML='<span>'+unescape(libelle)+'</span>';
document.getElementById(id).style.backgroundColor='#FAA500';
}
function libelleTGO(id){
document.getElementById('libelleTG').className='hidden';
document.getElementById('libelleTG').innerHTML='';
document.getElementById(id).style.backgroundColor='#FACD76';
}
function mouseMove(event){
var x=event.clientX;
var y=event.clientY;
document.getElementById('libelleTG').style.left=(x+20)+'px';
document.getElementById('libelleTG').style.top=(y+5)+'px';
}
var libelle=new Array('Profiter de réductions valable en magasin ','Jeux concours ','Se tenir au courant de l\'actualité de l\'enseigne et des nouveautés','Profiter de réductions valable pour un achat en ligne ','Sans intérêt');
var valeur=new Array(10,50,20,30,5);
</script>
</head>
<body onload="graph(libelle,valeur,5);" onmousemove="mouseMove(event);">
<p id="libelleTG" class="hidden"></p>
<div id="graph"></div>
<body>
</html> |
Partager