sms-lapli/smslapli/templates/public/temp_rapport.html

{% load staticfiles %}
<!DOCTYPE html>
<html>
	<head>
		<title>Rapport</title>
		<link rel="stylesheet" type="text/css" href="{% static "public/bootstrap/dist/css/bootstrap.min.css" %}">


		<link rel="stylesheet" type="text/css" href="{% static "public/css.css" %}">


		<script src="{% static "public/bootstrap/dist/js/Chart.js" %}"></script>


    	<script src="{% static "public/jquery/jquery-1.11.3.min.js" %}"></script>

		<script src="{% static "public/bootstrap/dist/js/bootstrap.min.js" %}"></script>

		<script src="{% static "public/bootstrap/js/graphe.js" %}"></script>

		<script type="text/javascript">
			$(document).ready(function(){ 
			    $("#myTab a").click(function(e){
			    	e.preventDefault();
			    	$(this).tab('show');
			    });
			});
		</script>
	</head>

	<body>
		<!--===================================Menu Principal=======================================================-->
	    <nav class="navbar navbar-inverse navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="/ihaiti">CNSA</a>
	        </div>
	        <div id="navbar" class="navbar-collapse collapse">
	            <ul class="nav navbar-nav">
	                <li class="active"><a href="/haiti">Accueil</a></li>
	                <li><a href="#about">Page 2</a></li>
	                <li><a href="/rapport">Rapport</a></li>
	            </ul>
	          <form class="navbar-form navbar-right">
	            <div class="form-group">
	              <input type="text" placeholder="Email" class="form-control">
	            </div>
	            <div class="form-group">
	              <input type="password" placeholder="Password" class="form-control">
	            </div>
	            <button type="submit" class="btn btn-success">Sign in</button>
	          </form>
	        </div>
	      </div>
	    </nav>

 

	    <div class="container-fluid">
	      <div class="row">
	        <div class="col-sm-3 col-md-2 sidebar">
	          <ul class="nav nav-sidebar">
	            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
	            <li><a href="#">Reports</a></li>
	            <li><a href="#">Analytics</a></li>
	            <li><a href="#">Export</a></li>
	          </ul>
	        </div>
	        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<div class="bs-example">
		            <ul class="nav nav-tabs" id="myTab">
		                <li class="active"><a href="#sectionA">Graphe</a></li>
		                <li><a href="#sectionB">Tableau</a></li>
		                <li><a href="#section">Carte</a></li>
		            </ul>
		            <div class="tab-content">
		                <div id="sectionA" class="tab-pane fade in active">
		                    <h2 class="sub-header">Graphe des donnees pluviometriques enregistrees</h2>
		                    <div class="table-responsive">
								<canvas id="canvas" height="450" width="1100"></canvas>
							</div>
		                </div>
		                <div id="sectionB" class="tab-pane fade">
		                    <h2 class="sub-header">Tableau des enregistrements pluviometrique</h2>
							<div class="table-responsive">
					            <table class="table table-striped">
					              <thead>
					                <tr>
					                  <th>Departement</th>
					                  <th>Commune</th>
					                  <th>Station</th>
					                  <th>Date</th>
					                  <th>Quantite de pluie</th>
					                </tr>
					              </thead>
					              <tbody>
					                <tr>
					                  <td>1,001</td>
					                  <td>1,001</td>
					                  <td>1,001</td>
					                  <td>1,001</td>
					                  <td>1,001</td>
					                </tr>
					                <tr>
					                  <td>1,002</td>
					                  <td>amet</td>
					                  <td>consectetur</td>
					                  <td>adipiscing</td>
					                  <td>elit</td>
					                </tr>
					                <tr>
					                  <td>1,003</td>
					                  <td>Integer</td>
					                  <td>nec</td>
					                  <td>odio</td>
					                  <td>Praesent</td>
					                </tr>
					                <tr>
					                  <td>1,003</td>
					                  <td>libero</td>
					                  <td>Sed</td>
					                  <td>cursus</td>
					                  <td>ante</td>
					                </tr>
					                <tr>
					                  <td>1,004</td>
					                  <td>dapibus</td>
					                  <td>diam</td>
					                  <td>Sed</td>
					                  <td>nisi</td>
					                </tr>
					                <tr>
					                  <td>1,005</td>
					                  <td>Nulla</td>
					                  <td>quis</td>
					                  <td>sem</td>
					                  <td>at</td>
					                </tr>
					                <tr>
					                  <td>1,006</td>
					                  <td>nibh</td>
					                  <td>elementum</td>
					                  <td>imperdiet</td>
					                  <td>Duis</td>
					                </tr>
					                <tr>
					                  <td>1,007</td>
					                  <td>sagittis</td>
					                  <td>ipsum</td>
					                  <td>Praesent</td>
					                  <td>mauris</td>
					                </tr>
					                <tr>
					                  <td>1,008</td>
					                  <td>Fusce</td>
					                  <td>nec</td>
					                  <td>tellus</td>
					                  <td>sed</td>
					                </tr>
					                <tr>
					                  <td>1,009</td>
					                  <td>augue</td>
					                  <td>semper</td>
					                  <td>porta</td>
					                  <td>Mauris</td>
					                </tr>
					                <tr>
					                  <td>1,010</td>
					                  <td>massa</td>
					                  <td>Vestibulum</td>
					                  <td>lacinia</td>
					                  <td>arcu</td>
					                </tr>
					                <tr>
					                  <td>1,011</td>
					                  <td>eget</td>
					                  <td>nulla</td>
					                  <td>Class</td>
					                  <td>aptent</td>
					                </tr>
					              </tbody>
					            </table>
					          </div>
						</div>
		                <div id="section" class="tab-pane fade">
		                    <h2 class="sub-header">Carte des enregistrements pluviometrique</h2>
		                </div>
		        	</div>
	            </div>
	        </div>
	      </div>
	    </div>
	</body>
</html>