Exercice 8 : Faire une boucle PHP pour alimenter l’API Google. (Son graphe et son tableau BDD)

Introduction:

Plutôt que d’utiliser du JSON, je génére directement en PHP le format d’alimentation de données de l’API google et je stocke tout cela dans un tableau PHP.

Par exemple , l’API Google attends cette ligne pour générer son graphe :

[‘Name’,   ‘Age’, ‘Instrument’, ‘Color’],

et bien, je reconstitue chaque ligne avec PHP, je les place dans un tableau PHP, tout en y injectant les variables de la base de donnée à chaque fois, tout en respectant le format de la ligne. ce qui donne :

$ligneFormatee[]= »[$row[0],$row[1],$row[2],$row[3]], »;

C’est à dire que je formate un tableau PHP qui va automatiquement alimenter l’API Google et ses nombreux graphiques avec un simple ECHO …

Ce qui est super, c’est que du coup, tout est auto adaptable, et s’alimente facilement, qu’il y ait 10 variables, ou 1500 variables en base de données.

Les graphiques s’auto-générent et adaptent automatiquement selon la quantité de données.

(Faudra voir à inclure un time out ou un maxi quelconque.)

 

Image du programme en action :

 

exo8

Plus on entre de données, plus le graphique généré augmente et le tableau aussi, et tout cela sans rien faire:

exo82

Vu que la boucle qui récupère les données peut facilement se copier-coller dans tous les graphes et tableaux de l’API Google, je vous laisse imaginer les possibilités du truc … Et c’est facile.. Ca tient dans cette ligne de code, qui lit le tableau qui contient les lignes formatées pour l’api google:

foreach ($ligneFormatee as $valeur) {
 echo $valeur;}

 

 

Le Code:


<BODY BGCOLOR="#e7dfce">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

<FONT size="3pt" face="arial" >
<!-- 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>

<?php
// Connexion à la base de données et lecture des données
mysql_connect("localhost", "root", "");
mysql_select_db("huleuxnicolas");
$query = "SELECT cadres,employes,ouvriers,externe 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))
 {

// remplissage du tableau
 $tab[]=$row;

// Mise en forme de la ligne qui va s'intégrer à JQPLOT plus bas dans l'API google.
 $ligneFormatee[]="[$row[0],$row[1],$row[2],$row[3]],";
 }

// On enlève la dernière virgule de la dernière ligne du tableau, qui empecherait le graphe de se générer.
$result = count($ligneFormatee);
$effaceVirgule=$result-1;
$ligneFormatee[$effaceVirgule] = rtrim($ligneFormatee[$effaceVirgule],',');
//var_dump($ligneFormatee);
 ?>

<!--
API GOOGLE
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>
 API GOOGLE
 </title>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['table', 'columnchart']});
 </script>
 <script type="text/javascript">

 function drawVisualization() {
 var dataTable = google.visualization.arrayToDataTable(

 [
 ['Cadres', 'Employés', 'Ouvriers', 'Intérim'],
 <?php // Ici l'astuce c'est de rebalancer tout le contenu du tableau PHP dans l'api google sans la dernière virgule qui bloquait tout.
 foreach ($ligneFormatee as $valeur) {
 echo $valeur;}
 ?>
 ]
 );

 var table = new google.visualization.Table(document.getElementById('table'));
 table.draw(dataTable, null);

 var dataView = new google.visualization.DataView(dataTable);
 dataView.setColumns([0,1,2,3]);

 var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
 chart.draw(dataView, {width: 800, height: 500});
 }

 google.setOnLoadCallback(drawVisualization);
 </script>
 </head>
 <body style="font-family: Arial;border: 0 none;">
 <div>le Contenu de la base de données ...</div>
 <div id="table"></div>
 <br />
 <div>Le Graphique</div>
 <div id="chart"></div>
 </body>
</html>

<pre><pre>

 

Publicités