Exercice 7 : Utiliser L’API GOOGLE pour générer des graphes.

Introduction :

Une Première approche de l’utilisation de l’API Google, je génére 3 graphes dans 3 divs différentes.

Les graphes ne sont pas encore tous reliés à un élément de base de données, je le ferais plus tard.

Lorsqu’on injecte les variables directement avec PHP, c’est particulièrement facile. Par contre, il va falloir voir comment utiliser du XML ou du JSON pour injecter les données, dans le prochain article .

Première impression : C’est beau et facile à mettre en place.

Image du programme :

Image

Le code :

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

<FONT size="1pt" 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 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))
 {

 // remplissage du tableau
 $tab[]=$row[0];
 $tab[]=$row[1];
 $tab[]=$row[2];
 $tab[]=$row[3];
 //var_dump($tab);
 }

?> 

 <!--
On se mets à utiliser l'api Google à partir de plus bas
-->

<!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>
 Google Visualization API Sample
 </title>
 <script type="text/javascript" src="//www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
 </script>
 <script type="text/javascript">

 // 1ER GRAPHE
 function drawVisualization() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Année', 'Cadres', 'Employes', 'Ouvriers', 'Interim'],
 ['2003',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2004',<?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],

 ]);

 // Create and draw the visualization.
 new google.visualization.ColumnChart(document.getElementById('visualization')).
 draw(data,
 {title:"Employes",
 width:600, height:400,
 hAxis: {title: "Year"}}
 );
 }

 google.setOnLoadCallback(drawVisualization);

 // 2EME GRAPHE
 function drawVisualization2() {
 // Some raw data (not necessarily accurate)
 var data = google.visualization.arrayToDataTable([
 ['Mois', 'Cadres', 'Employés', 'Ouvriers', 'Interim'],
 ['2004/05', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2005/06', <?php echo $tab[0]?>,<?php echo $tab[1]?>,<?php echo $tab[2]?>,<?php echo $tab[3]?>],
 ['2006/07', 157, 1167, 587, 807],
 ['2007/08', 139, 1110, 615, 968],
 ['2008/09', 136, 691, 629, 1026]
 ]);

 // Create and draw the visualization.
 var ac = new google.visualization.AreaChart(document.getElementById('visualization2'));
 ac.draw(data, {
 title : 'Employés embauches par mois',
 isStacked: true,
 width: 600,
 height: 400,
 vAxis: {title: "Nouveaux"},
 hAxis: {title: "Mois"}
 });
}
 google.setOnLoadCallback(drawVisualization2);

 // 3EME GRAPHE
 function drawVisualization3() {
 // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
 ['Tache', 'Hobbies des Employés'],
 ['Travailler', 11],
 ['Manger', 2],
 ['Glander', 2],
 ['Regarder la télévision', 2],
 ['Dormir', 7]
 ]);

 // Create and draw the visualization.
 new google.visualization.PieChart(document.getElementById('visualization3')).
 draw(data, {title:"Quels sont les hobbies de vos employés?"});
}
 google.setOnLoadCallback(drawVisualization3);

 </script>
 </head>
 <!-- les 3 divs ont l'attribut float left qui les mets les unes à coté des autres . !-->
 <body style="font-family: Arial;border: 0 none;">
 <div id="visualization" style="width: 600px; height: 400px; float:left;";></div>
 <div id="visualization2" style="width: 600px; height: 400px;float:left;";></div>
 <div id="visualization3" style="width: 600px; height: 400px;float:left;";></div>
</body>
</html>

 

Publicités