hydrograph-hydrogramme-fra.html

<!--#include virtual="/includes/header-fra.html" -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="scripts/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="scripts/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="scripts/flot/jquery.flot.stack.js"></script>
<script type="text/javascript" src="scripts/hydrograph-hydrogramme.js"></script>

<h1 class="print_hide">Hydrographie du fleuve Fraser</h1>
<div class="grid-12">
  <div class="wet-boew-tabbedinterface animate slide-horz tabs-style-1">
    <ul class="tabs">
      <li class="default"><a href="#graph">Graph</a></li>
      <li><a href="#help">Aide</a></li>
    </ul>

    <div class="summary tabs-panel filled" style="border: 2px solid #eee">
      <div id="graph" style="height:521px">
        <div class="span-2 print_hide">
          <form id="daily_depth">
              <label for="date">Date :</label>
              <select id="month"
                  class="date"
                  name="month">
                <option value="2">janvier</option>
                <option value="3">f&eacute;vrier</option>
                <option value="4">mars</option>
                <option value="5">avril</option>
                <option value="6">mai</option>
                <option value="7">juin</option>
                <option value="8">juillet</option>
                <option value="9">ao&ucirc;t</option>
                <option value="10">septembre</option>
                <option value="11">octobre</option>
                <option value="12">novembre</option>
                <option value="1">d&eacute;cembre</option>
              </select>

              <select id="year"
                  name="year"
                  class="date">
              </select>
              <input id="alt-date" type="hidden" />

              <label for="period">P&eacute;riode :</label>
              <select id="period">
                <option value="3">12 Months</option>
                <option value="2">6 Months</option>
                <option value="1">2 Months</option>
                <option value="0">1 Month</option>
              </select>

              <label for="plot">Relev&eacute; :</label>
              <input id="actual"
                  type="checkbox"
                  name="actual"
                  checked="checked" /> R&eacute;el<br />
              <input id="predicted"
                  type="checkbox"
                  name="predicted"
                  checked="checked" /> Pr&eacute;vu<br />
              <button id="submit"
                  type="button"
                  class="button button-accent"
                  style="margin-top:3em"
                  name="submit">Appliquer</button>
              <button id="print_hydrograph" class="button button-accent" style="display:block;margin-top:1em;">Imprimer</button>
          </form>
        </div>
        <div class="span-9 demo-container print_show" style="display:block">
					<h2 style="margin-left: 10px;">Hydrographie du fleuve Fraser &aacute; Hope - 08MF005</h2>
          <div style="font-size: 15px; font-weight: bold;">
            <p style="margin-left: 12px;">Du <span id="static-month"></span>
            <span id="static-year"></span> au <span id="static-period"></span></p>
          </div>
          <div id="loading" style="margin-left: 10px;">
						<span class="float:left;">Please wait while we fetch your results...</span>
						<img class="spinner" src="images/spinner.gif" alt="" style="width: 30px;height: 30px; margin: -3px 0 0 0; position: absolute;"/>
					</div>
          <div id="legend_container" style="margin-left:58px"></div>					
					<!--[if IE]>
					<div id="hydrograph_chart" style="width: 783px; height:360px;margin:0"></div>
					<![endif]-->
					<!--[if !IE]><!-->
					<div id="hydrograph_chart" style="width: 870px; height:400px;margin:0"></div>
					<!--<![endif]-->
        </div>
      </div>

      <div id="help">
        <p>
        Avadepth produit des diagrammes hydrographiques illustrant les variations saisonnières des débits. Chaque diagramme contient des lignes de couleur représentant les débits réels et prévus, ainsi que des lignes pour les périodes correspondantes au cours deux autres années (désignées année d'inondation et année de sécheresse).
        </p>

        <p>
        Pour créer un diagramme hydrographique,
        </p>

        <ul>
          <li>Introduire une date. Cliquer sur la date texte pour choisir dans un calendrier.</li>
          <li>Sélectionner la durée du relevé.</li>
          <li>Cliquer sur l'une ou l'autre des cases à cocher pour désactiver l'affichage d'une ligne hydrographique.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>
<!--#include virtual="/includes/footer-fra.html" -->