Dessiner un histogramme (dynamiquement ! :)
Soyez le premier à donner votre avis sur cette source.
Snippet vu 28 499 fois - Téléchargée 26 fois
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 !!! ;)
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
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
- Histogramme javascript
- Histogram javascript - Meilleures réponses
- Histogramme math - Meilleures réponses
- Récupérer données json (javascript) - Conseils pratiques - Javascript
- Javascript base de données - Conseils pratiques - Javascript
- Calculatrice javascript - Guide
- Labyrinthe javascript - Guide
- Poo javascript - Conseils pratiques - Javascript
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
merci.
qu'est ce qui n'est pas supporté par mon navigateur selon toi ?
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.