Dessiner un histogramme (dynamiquement ! :)

Commenter

Contenu du snippet

Source qui vous montre comment dessiner un histogramme presque dynamiquement ;)
Pas grand chose d'autre à dire sinon de regarder et de tester ce script c très bon pour apprendre !!! ;)

Source / Exemple : 


<html>
<head>
 <title>Application des calques DHTML pour dessiner un Histogramme</title>
<script language=JavaScript><!--
var v=new Array(10);// le tableau des Datas
var nav,calk; // nav sert à s'adapter au Navigateur et calk sert à Netscape
var textes="ABCDEFGHIJKLM"; // pour puiser des caractères à placer sous barres
function init()
{
 if (navigator.appName=="Netscape")
  { nav="NE"; calk=document.layers['his']; }
    else nav="IE";
}

function histo()
{
 /**** ch est une chaine qui va recevoir toutes les commandes HTML permettant de dessiner
  l'Histo.. en utilisant les Données et les images des couleurs des barres..************/
 var ch="";
 ch+='<Table width=300 height=160  cellpadding=0 cellspacing=4';
 // si navigateur est IExplorer alors on ajoute un fond au tableau sinon rien..
 if (nav=="IE") ch+=' background="fond_ma.gif"';
 ch+=' border=3><TR><TD>';
 ch+='<table width=100% height=100% cellpadding=0 cellspacing=0 >';
 ch+='<tr height=10><td colspan=10 align=center>';
 ch+='<font face="Verdana,Arial" size=-2 color="navy"><b>';
 ch+='Ventes par secteur d\'activité</B></FONT></td></TR><TR height=150>';
 for (var i=0;i<10;i++)
  { //dessin des barres
   v[i]=Math.floor(Math.random()*150);
   ch+='<td width=10% valign=bottom>';
   ch+='<img src="h_'+i+'.gif" width=30 height='+v[i]+'></TD>';
  }
 ch+='</TR><TR>'; //</table></TD></TABLE>';
 for ( var i=0;i<10;i++)
  { //textes sous barres
    ch+='<TD align=center><font face="Verdana,Arial" size=-2 color=gray><B>'+textes.charAt(i)+'</B></font></td>';
  }
 ch+='</TR></table></td></table>';

 if ( nav=="IE") his.innerHTML=ch; // pour IExplorer ..
 else  // pour Netscape.. 
       {
        calk.document.open();
        calk.document.write(ch);
        calk.document.close();
       }
}
//-->
</script>
</head>
<body onLoad="init();histo();" bgcolor="#eeeeee">
<br><font face="Verdana,Arial" size=-2 color=blue>
Script permettant d'étudier le principe d'affichage d'un <font color=red>
<b>HISTOGRAMME</B></font> dans un calque DHTML.
</font>
<!--***** le calque de l'Histogramme **** -->
<div id="his" style="position:absolute;left:200;top:100;width:300;height:160">
</div>
<!--***** le calque du Bouton **** -->
<div style="position:absolute;left:250;top:300">
<form>
<input type=button value="Recharger Aléatoirement" onClick="histo();">
</form>
</DIV>
</body>
</html>

Conclusion :


Tout seule en Js comme ça, ça sert pas a grand chose j'en conviens ; Le mieux c de l'utiliser en parallèle avec l'ASP ou PHP en affichant le résultat d'un sondage ou encore la popularité du site ...
Je pense que je vé bientot publier une source en ASP (et peut etre en PHP) sur le principe ;)

@tte et bonn' prog'
pi0up51
http://www.infobox51.fr.st

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (pi0up51)