begin process at 2012 05 24 22:26:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > DESSINER UN HISTOGRAMME (DYNAMIQUEMENT ! :)

DESSINER UN HISTOGRAMME (DYNAMIQUEMENT ! :)


 Information sur la source

Note :
8 / 10 - par 2 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :09/05/2002 Date de mise à jour :09/05/2002 22:50:19 Vu :21 397
Auteur : pi0up51

Ecrire un message privé
Site perso
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

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

  • <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&eacute;</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'&eacute;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&eacute;atoirement" onClick="histo();">
  • </form>
  • </DIV>
  • </body>
  • </html> 
<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&eacute;</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'&eacute;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&eacute;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


 Sources du même auteur

EVENT HANDLER (INFO-AIDE FORMULAIRE + QQS FONCTIONS)
FRACTALE MANDLEBROT (GÉNÉRER EN JS AVEC BOUCLE FOR..)
POPUP QUI AFFICHE LE TEMPS DE CONNECTION SUR UNE PAGE ;)
INFOBULLE SOUS IE ET/OU NETSCAPE
Source avec Zip IMAGES RÉACTIVE !!
Toutes les sources de pi0up51

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de roidesrats le 29/04/2004 18:39:08

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 ?

Commentaire de JLN le 04/12/2004 08:43:01

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.

Commentaire de oliver7 le 31/12/2004 14:04:55

comment fait on pour que se ne soit pas des valeurs au hasard mais que l'on ecrit nous meme?

merci.

Commentaire de lili_jazzy le 03/07/2009 11:20:54

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

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy Tab (GT-P1000) Tablet PC
Entre 699€ et 699€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,780 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)