Dessiner un histogramme (dynamiquement ! :)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 27 267 fois - Téléchargée 26 fois

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

Ajouter un commentaire

Commentaires

Signaler
roidesrats
Messages postés
8
Date d'inscription
vendredi 12 septembre 2003
Statut
Membre
Dernière intervention
9 avril 2005
 -
salut, il marche bien ton prog sous I.E. mais pas sous mozilla
qu'est ce qui n'est pas supporté par mon navigateur selon toi ?
Signaler
cs_JLN
Messages postés
373
Date d'inscription
samedi 1 juin 2002
Statut
Membre
Dernière intervention
17 juin 2013
 -
un zip aurait été le bienvenu surtout pour les images non ? Sinon ca marche et c'est pas mal du tout. Pour la note ce sera 8 pas plus à cause du zip.
Signaler
oliver7
Messages postés
102
Date d'inscription
dimanche 3 octobre 2004
Statut
Membre
Dernière intervention
8 septembre 2006
 -
comment fait on pour que se ne soit pas des valeurs au hasard mais que l'on ecrit nous meme?

merci.
Signaler
lili_jazzy
Messages postés
10
Date d'inscription
mardi 21 novembre 2000
Statut
Membre
Dernière intervention
3 juillet 2009
 -
pour firefox il suffit de tester le navigateur et d'ajouter

ligne 42: document.getElementById("his").innerHTML = ch;
*****
pour que ce ne soit pas aléatoire:
lignes 28 à 33 à remplacer par

v[i]=maValeur * 10; //10pixels de haut par valeurs
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)