Ce script est déclaré obsolète. Il n'est conservé que pour information.
Ce script affiche un histogramme à baton en DHTML. Ici un exemple avec les stats de visiteurs de octobre 2002 du site. Compatible IE5 et plus, Netscape 4.7, Netscape 6 et 7 et Mozilla.
<HTML><HEAD><TITLE>Tout JavaScript.com - Tracé d'histogrammes Version 2</TITLE><SCRIPT LANGUAGE="JavaScript">// D'autres scripts sur http://www.toutjavascript.com// Script entièrement développé par et pour Tout JavaScript.com// Si vous utilisez ce script, vous devez laisser ce commentaire// Déclaration du tableau des Xvar tabX=new MakeTab('15/10/2002','16/10/2002','17/10/2002','18/10/2002','19/10/2002','20/10/2002','21/10/2002','22/10/2002','23/10/2002','24/10/2002','25/10/2002','26/10/2002','27/10/2002','28/10/2002','29/10/2002','30/10/2002','31/10/2002','01/11/2002','02/11/2002','03/11/2002','04/11/2002','05/11/2002','06/11/2002','07/11/2002','08/11/2002','09/11/2002','10/11/2002','11/11/2002','12/11/2002','13/11/2002');// Déclaration du tableau des Yvar tabY=new MakeTab(1703,1722,1773,1813,1011,956,1683,1697,1548,1781,1696,1013,1120,1771,1813,1726,1624,986,966,942,1658,1729,1765,1706,1711,1221,1067,1368,1831,1187);// l'affichage de l'histogrammes se fait dans la partie BODY// Rien à toucher à partir d'icifunction AffHisto(tabx,taby,incX,Y,titre,dX,dY,decal) { var ie="";var ns=""; var nb=taby.length; var max=GetMax(taby); var min=GetMin(taby); var incY=Y/max; var tailleY=0; var tailleX=0; for(var i=0;i<nb;i++) { tailleY=Math.floor(taby[i]*incY); tailleX=Math.floor(incX); var nom="histo.gif"; if ((taby[i]==max)||(taby[i]==min)) {nom="orange.gif"} ie+="<DIV style='position:absolute;height:100;top:"+(dY-tailleY)+";left:"+(dX+i*(incX+1))+"'>"; ie+="<img valign='bottom' border=0 src='"+nom+"' width="+tailleX+" height="+tailleY+" alt='"+tabx[i]+" : "+(taby[i])+"'>"; ie+="<BR><FONT size='-2'><CENTER>"+tabx[i].substring(0,2)+"<BR>"+tabx[i].substring(3,5)+"</CENTER></FONT>"+"</DIV>"; ns+="<LAYER height=100 width="+incX+" top='"+(dY-tailleY)+"' left='"+(dX+i*(incX+1))+"'>"; ns+="<img valign='bottom' border=0 src='"+nom+"' width="+tailleX+" height="+tailleY+" alt='"+tabx[i]+" : "+(taby[i])+"'>"; ns+="<BR><FONT size='-2'><CENTER>"+tabx[i].substring(0,2)+"<BR>"+tabx[i].substring(3,5)+"</CENTER></FONT>"+"</LAYER>"; } for(i=0;i<=Math.round(max/decal);i++) { ie+="<DIV style='position:absolute;top:"+(dY-decal*i*(incY))+";left:"+(dX-5)+"'><IMG src='red.gif' height='1' width='"+(nb*(incX+1)+5)+"'></DIV>"; ie+="<DIV style='position:absolute;top:"+(dY-8-decal*i*(incY))+";left:"+(dX-30)+"'><FONT size='-2' color='red'>"+(i*decal)+"</FONT></DIV>"; ns+="<LAYER top='"+(dY-decal*i*(incY))+"' left='"+(dX-5)+"'><IMG src='red.gif' height='1' width='"+(nb*(incX+1)+5)+"'></LAYER>"; ns+="<LAYER top='"+(dY-8-decal*i*(incY))+"' left='"+(dX-30)+"'><FONT size='-2' color='red'>"+(i*decal)+"</FONT></LAYER>"; } ie+="<DIV style='position:absolute;top:"+(dY-GetMoy(taby)*(incY))+";left:"+(dX-5)+"'><IMG src='green.gif' height='1' width='"+(nb*(incX+1)+15)+"'></DIV>"; ie+="<DIV style='position:absolute;top:"+(dY-GetMoy(taby)*(incY)-8)+";left:"+(dX+nb*(incX+1)+15)+"'><FONT size='-2' color='green'>"+GetMoy(taby)+"</FONT></DIV>"; ns+="<LAYER top='"+(dY-GetMoy(taby)*(incY))+"' left='"+(dX-5)+"'><IMG src='green.gif' height='1' width='"+(nb*(incX+1)+15)+"'></LAYER>"; ns+="<LAYER top='"+(dY-GetMoy(taby)*(incY)-8)+"' left='"+(dX+nb*(incX+1)+15)+"'><FONT size='-2' color='green'>"+GetMoy(taby)+"</FONT></LAYER>"; var nbtotal=GetMoy(taby)*nb; ns+="<LAYER top='"+(dY+30)+"' left='"+(dX-5)+"'><B><FONT size=-1>"+titre+"</FONT></B></LAYER>"; ie+="<DIV style='position:absolute;top:"+(dY+30)+";left:"+(dX-5)+"'><B><FONT size=-1>"+titre+" (Total : "+nbtotal+")</FONT></B></DIV>"; if ((document.all)||(document.getElementById)) {disp(ie)} else {disp(ns)}}function GetMoy(tab) { var nb=tab.length; var moy=0; for(var i=0;i<nb;i++) {moy=moy+tab[i];} if (nb!=0) return Math.round(moy/nb);}function GetMax(tab) { var max=tab[0]; var nb=tab.length; for(var i=0;i<nb;i++) {max=Math.max(max,tab[i]);} return max;}function GetMin(tab) { var min=tab[0]; var nb=tab.length; for(var i=0;i<nb;i++) {min=Math.min(min,tab[i]);} return min;}function MakeTab() { this.length = MakeTab.arguments.length; for (var i = 0; i < this.length; i++) this[i] = MakeTab.arguments[i];}function disp(txt) { document.write(txt) }</script></HEAD><BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00"><FONT FACE="Arial" SIZE='-1' COLOR="#000099"><CENTER><BIG><B>Histogramme Version 2</B></BIG><BR><BR>Ce script affiche un histogramme à baton en DHTML.<BR>Ici un exemple avec les stats de visiteurs de octobre 2002 du site toutjavascript.com (<A href="http://www.toutjavascript.com/info/voirstatis.php3" target=_blank>Stats en direct visibles ici</A>)<BR>Observez les graduations, la moyenne et les infobulles qui apparaîssent au passage de la souris.<BR><BR>Compatible IE5 et plus, Netscape 4.7, Netscape 6 et 7 et Mozilla.<BR></CENTER><script type="text/javascript"> // Affichage ici // AffHisto(coordonnées en X,en Y,largeur d'une barre, hauteur,titre,position en X, position en Y, increment de l'echelle) { AffHisto(tabX,tabY,15,220,'Les visiteurs uniques de Tout Javascript.com en octobre 2002',100,400,100);</script><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><a href="http://www.toutjavascript.com" target='_blank'><font size="1" face="arial" color="#CCCCFF">Tout JavaScript.com</font></a></center></FONT></BODY></HTML><!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->
En savoir plus
