11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,


J'ai besoin d'aide en JS.
A l'aide, svp.

J'ai une DIV "graphique03" qui a un overflow-x.
C'est voulu. C'est ok !
Cette div contient une image.
      <div id="graphique03">
        <img src="php/statsclics.php?stat=<?php echo $graphStat; ?>&param=<?php echo $param; ?>&modele=<?php echo $modele; ?>">
      </div>


Comment faire pour qu'en création de l'image (graphique de statistiques),
l'overfllow soit bien actif, et que directement,
que le curseur de défilement soit directement le plus au maximum à droite.
De la sorte, c'est d'office la partie droite qui sera visible.

Je suppose que seul le javascript peut faire cela !
Modifié par jytest (23 Jun 2012 - 18:39)
Il faut que tu utiliser javascript.


monDivAScroller.scrollRight = 0;


Perso, pour ce que tu veut faire j'aurai utilisé du HTML/CSS au lieu d'une image, ça te permettrai de mettre de popups sur tes barres, les changer de couleur au survol, etc...
Modifié par JJK801 (22 Jun 2012 - 21:52)
Je m'amusais en php...
Mais il est vrai que ces petits effets-là me manquent !
As-tu des exemples de codes ?

Tu remarques néanmoins que mon code fonctionne...
Oui, je dois le terminer demain...

Ton idée de le faire en html/css, m'intéresse, me séduit...
hum les couleurs qui changent...
Les popups qui s'affichent au passage de la souris !
Le pied !
Mais comment faire ?
Modifié par jytest (22 Jun 2012 - 22:03)
jytest a écrit :
Je m'amusais en php...
Mais il est vrai que ces petits effets-là me manquent !
As-tu des exemples de codes ?

Tu remarques néanmoins que mon code fonctionne...
Oui, je dois le terminer demain...

Ton idée de le faire en html/css, m'intéresse.
Mais comment faire ?


Il est vrai que créer des graphiques avec GD est intellectuellement enrichissant Smiley cligne

En fait, faire la même chose en HTML/CSS est pas bien différent, il te suffis de positionner tes blocs en absolu dans un bloc parent, de la même manière que tu positionne tes graphiques dans ton image principale avec GD.
Tu utilise la balise style de tes blocs HTML pour leurs attribuer un left (x) et un height (hauteur), tout le reste tu le fait dans une feuille css.
Modifié par JJK801 (22 Jun 2012 - 22:09)
Tu as un exemple ?
Ou un bout de code ?
As-tu déjà fait cela ?
Si je choisis cette option html/css,
pourrais-je à l'occasion revenir vers toi en MP ?

Car, j'ai bien envie d'essayer et d'y arriver !
Modifié par jytest (22 Jun 2012 - 22:16)

<?php
$vals = array(
          "01/01" => 100,
          "02/01" => 75,
          "03/01" => 68,
          "04/01" => 17,
          "05/01" => 95
        );

$GraphMaxValue  = max($vals); // Valeur maximum dans le graphique (définie par tes valeurs)
$GraphHeight    = 300; // Hauteur du graphique en pixels (a modifier en fonction de ton intégration)
$PerGradHeight  = 30; // Hauteur d'une graduation Y en px (défini pas ta font size, tes bordures, etc...)
$PerGradWidth   = 30; // Largeur d'une graduation X en px (défini pas ta font size, tes bordures, etc...)
$NbGradX        = count($vals); // Nombre de graduation en X
$BarWidth       = 10; // Largeur des bars en px

$GraphRealHeight  = ( $GraphHeight - $PerGradHeight ); // On reserve une ligne pour l'affichage en bas du graphique
$NbGradY          = floor( $GraphRealHeight / $PerGradHeight ); // Nombre de graduations
$UnitsPerGrad     = ceil( $GraphMaxValue / $NbGradY ); // Nombre d'unités pas graduation
$PxPerUnits       = ( $PerGradHeight / $UnitsPerGrad ); // Nombre d'unités par pixel
$BaselineHeight   = ( $GraphHeight - ( $NbGradY * $PerGradHeight ) ); // Hauteur de la ligne du bas
?>
<table style="height: <?php echo $GraphHeight; ?>;" >
  <tbody>
    <?php
    for($y = $NbGradY; $y > 0; $y--)
    {
    ?>
    <tr>
      <td style="height: <?php echo $PerGradHeight; ?>px; text-align: right;" ><?php echo ( $y * $UnitsPerGrad ); ?></td>
      <?php
      if($y == $NbGradY)
      {
        foreach($vals as $key => $val)
        {
      ?>
      <td style="width: <?php echo $PerGradWidth; ?>px; position: relative; vertical-align: bottom;" rowspan="<?php echo $NbGradY; ?>">
        <div style="height: <?php echo round($val * $PxPerUnits); ?>px; background: red; width: <?php echo $BarWidth; ?>px; margin: 0 auto;"></div>
      </td>
      <?php
        }
      }
      ?>
    </tr>
    <?php
    }
    ?>
  </tbody>
  <tfoot>
    <tr>
      <td style="height: <?php echo $BaselineHeight; ?>px; text-align: right;">0</td>
      <?php
      foreach($vals as $key => $val)
      {
      ?>
      <td style="text-align: center;"><?php echo $key; ?></td>
      <?php
      }
      ?>
    </tr>
  </tfoot>
</table>


Voila un truc vite fait. C'est pas très juste mais ça te donne une idée...

Oui, j'en ai fait des tas (j'ai un objet PHP qui fait ça pour moi) mais je les ai fait pour mon entreprise et je ne peut donc pas les divulguer.

Mais comme je te disai, en te basant sur ton script qui génère tes images, tu peut le faire.
Modifié par JJK801 (23 Jun 2012 - 00:14)
1.
J'ai testé ta proposition du scrolling :
a écrit :
document.getElementById("graphique03").scrollright=0;

Cela n'a pas l'air de fonctionner !
Pire on dirait que cette propriété n'existe pas !
J'ai donc essayé avec :
a écrit :
document.getElementById("graphique03").scrollleft = document.getElementById("graphique03").scrollwidth;

Mais là non plus, cela ne va pas non plus !

2.
Comme d'habitude...
Vu que nous connaissons depuis de très nombreuses secondes (...),
merci pour les commentaires explicatifs !
Je termine mon script de calculations (stat = 1 à 3 avec absolu/relatif) ce weekend.
Et lundi, je passe à ce truc !
En cas de besoin, puis-je te recontacter en MP ?

3.
Je me mets même à rêver,
afficher un camembert statistique en cliquant sur un bâton du graphique des statistiques,
reprenant les consultations de pages par jour, par rapport à une journée !
Mais là, à l'heure actuelle, ce n'est bien que du rêve !
A moins que la aussi, tu es une piste...
comme d'habitude, avec un petit bout de code ?
Et alors, me revoici avec du php et du JS... Au secours !
Merci d'avance.

Bon weekend !
Modifié par jytest (23 Jun 2012 - 06:57)
Nan, là le camembert en HTML, ça devient chaud, ou faut faire un canevas HTML5 avec du JS mais j'ai pas d'exemple sous la main et ce serai pas compatible partout
Pour le scrolling, je viens de trouver :


function scrollright() {
	document.getElementById("graphique03").scrollLeft = 1000;
}

et

      <div id="graphique03">
        <img src="php/statsclics.php?stat=<?php echo $graphStat; ?>&param=<?php echo $param; ?>&modele=<?php echo $modele; ?>" onClick="scrollright();">
      </div>

et

<body onload = "scrollright();">


Merci à JJK801 !!!
Modifié par jytest (23 Jun 2012 - 18:39)