Exercice 6 : Le même que l’exercice 5 mais avec Refresh des données automatique et 2 graphes.

Introduction :

Je reprends le code de l’exercice précédent, et ajoute une ‘option’ de refresh automatique à intervalle de 1 seconde pour le premier graphe, et toutes les 5 secondes pour le second.

Ce coup ci, deux graphes sont générés, et s’actualisent en temps réel en se basant sur l’ID maximum dans la base de données.

Notes : 

Il y a des problèmes de positionnement de DIV, à revoir dans l’exercice suivant.

Image du programme :

Image

 

Le Code :

 Exercice6.php

<!-- PHASE 1 L utilisateur entre des données dans des champs pour renseigner la base de donnée avec la méthode AJAX -->


<!-- Inclus le petit fichier de traitement en AJAX, c'est celui qui va enregistrer en bdd-->
<script src="ajax_framework.js" language="javascript"></script>

<!-- Montre un message quand l'enregistrement AJAX est bien fait -->
<div id="insert_response"></div>

<!-- Form: L'action="javascript:insert()"apelle la javascript function "insert" dans le fichier ajax_framework.js -->

<form action="javascript:insert()" method="post">

<input name="cadres" type="text" id="cadres" placeholder="Nombre de Cadres" value=""/>
<input name="employes" type="text" id="employes" placeholder="Nombres d'Employés" value=""/>
<input name="ouvriers" type="text" id="ouvriers" placeholder="Nombre d'Ouvriers" value=""/>
<input name="externe" type="text" id="externe" placeholder="Employés Interim" value=""/>
<input type="submit" name="Submit" value="insert" />
</form>
 
<!-- PHASE 2 Après un clic sur le second bouton, la div suivante est remplie par les données du fichier generationgraphe.php. 
celuis ci contient le graphe de statistique généré par jqplot a l'aide des données de la base de données--> 
<style type="text/css">


 </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script> 

 function myCall() {

 var request = $.ajax({ // $ EST LE RACCOURCI POUR JQUERY
 url: "generationgraphe.php", // LE FICHIER PHP QUI SERA APPELLE
 type: "GET", // CEST PAS DU POST MAIS CA POURRAIT LETRE 
 dataType: "html" // LE TYPE DE DATA TRANSMIS
 
 });
 request.done(function(msg) {
 $("#mybox").html(msg); 
 });
 request.fail(function(jqXHR, textStatus) {
 alert( "Request failed: " + textStatus );
 });
 ;
 }
 
 
 
 function myCall2() {

 var request = $.ajax({ // $ EST LE RACCOURCI POUR JQUERY
 url: "generationgraphe2.php", // LE FICHIER PHP QUI SERA APPELLE
 type: "GET", // CEST PAS DU POST MAIS CA POURRAIT LETRE 
 dataType: "html" // LE TYPE DE DATA TRANSMIS
 
 });
 request.done(function(msg) {
 $("#mybox2").html(msg); 
 });
 request.fail(function(jqXHR, textStatus) {
 alert( "Request failed: " + textStatus );
 });
 ;
 }
 // Une intervalle de mise à jour séparé pour chaque DIV, chacune lance la fonction appropriée ci dessus. 
 setInterval('myCall()', 5000) 
 window.onload = function(){setInterval('myCall()',5000)};
 setInterval('myCall2()', 10000) 
 window.onload = function(){setInterval('myCall2()',10000)};
 </script> 
 </head>
 
 <BODY >
 <br />
 <div id="mybox" >

 </div>
 </BODY>
 
 <BODY >
 <br />

 <div id="mybox2" >
 </div>
 </BODY></pre>
<pre>

 generationgraphe.php

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<?php
// Connexion à la base de données et récupération de tous les champs
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe FROM ca where id=(SELECT MAX(id) from ca); "; 
$result = mysql_query($query) or die(mysql_error());

// récupération des 4 colonnes dans un tableau $tab
while($row = mysql_fetch_array($result))
 {
 //contrôle graphique facultatif des données
 /*echo "<br>";
 echo " Contenu de la base de donnees";
 echo "<br>";
 echo $row[0]; echo " ";
 echo $row[1]; echo " ";
 echo $row[2];echo " ";
 echo $row[3];echo " ";
 echo "<br>";*/
 // remplissage du tableau
 $tab[]=$row[0];
 $tab[]=$row[1];
 $tab[]=$row[2];
 $tab[]=$row[3];
 //var_dump($tab);
 }
//$query2 = "delete FROM ca "; // Pour l'instant, J'efface les données en base de données après chaque génération de graphes.
//mysql_query($query2);
?>
<!-- Génération du Graphe -->
<!-- Appel à l'API JQPLOT -->
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
</head>
<body>
<div id="chart3" style="width:400px;height:400px;margin-top: 5px;
 margin-left: 10px;"></div>
<script>
$(document).ready(function() {
 <!-- Ci dessous ,On insère les variables récupérées par PHP dans le graph JQPLOT qui est généré par du javascript! Bien sur, du JSON ou du XML serait bien mieux -->
 var chart_data = [
 [['Cadres', <?php echo $tab[0]?>], ['Employés', <?php echo $tab[1]?>], ['Ouvriers', <?php echo $tab[2]?>], ['Interim', <?php echo $tab[3]?>]]
 ];
 var chart_opt = {
 title:'Pourcentage effectif des employés ',
 seriesDefaults:{
 renderer:$.jqplot.PieRenderer,
 rendererOptions: {
 startAngle: 180,
 sliceMargin: 4,
 showDataLabels: true } 
 },
 legend: {
 show: true,
 location: 'e'
 },
 };

 $.jqplot('chart3', chart_data, chart_opt);
});
</script>
</body>
</html></pre>
<pre>

generationgraphe2.php (c’est le graphique en barre)

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<?php
// Connexion à la base de données et récupération de tous les champs
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe FROM ca where id=(SELECT MAX(id) from ca); "; 
$result = mysql_query($query) or die(mysql_error());

// récupération des 4 colonnes dans un tableau $tab
while($row = mysql_fetch_array($result))
	{
	//contrôle graphique des données
	/*echo "<br>";
	echo " Contenu de la base de donnees";
	echo "<br>";
	echo $row[0]; echo "  ";
	echo $row[1]; echo "  ";
	echo $row[2];echo "  ";
	echo $row[3];echo "  ";
	echo "<br>";*/
	// remplissage du tableau
	$tab[]=$row[0];
	$tab[]=$row[1];
	$tab[]=$row[2];
	$tab[]=$row[3];
	//var_dump($tab);
	
	
	
	}
//$query2 = "delete FROM ca  "; 
//mysql_query($query2);
?>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jqPlot Charts - Bar</title>
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
</head>
<body>
<div id="chart2" style="width:400px;height:400px;margin-top:5px;
				margin-left:500px;"></div>
<script>
$(document).ready(function() {
  var chart_data = [ [<?php echo $tab[0]?>, <?php echo $tab[1]?>, <?php echo $tab[2]?>, <?php echo $tab[3]?>], [2010, 2010, 2010,2010] ];
  var ticks = ['Cadres', 'Employés', 'Ouvriers', 'Interim'];
  var labels = ['Nb Employé', 'Année'];
  var chart_opt = {
    title:'Graphique en Barre',
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks
      }
    },
    legend: {
      show: true,
      placement: 'outsideGrid',
      labels: labels,
      location: 's'
    },
  };

$('#chart2').bind('jqplotDataHighlight',
  function (ev, seriesIndex, pointIndex, data) {
    $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
  }
);
   
$('#chart2').bind('jqplotDataUnhighlight',
  function (ev) {
    $('#info2').html('Nothing');
  });
  $.jqplot('chart2', chart_data, chart_opt);
});
</script>
</body>
</html>
</script>
</body>
</html>
Publicités