utiliser l’api google chart avec une table externe

Francis82

Février 2013

Bonjour,
Si ça peut aider, voilà comment je fais (les puristes php me pardonnerons de n’avoir pas fait ça sous forme de class, mais ça marche...)

Ma table s’appelle spip_connaitre et contient :

l’adresse mail (clé unique)
le sexe : "Homme" ou "Femme"
la tranche d’age (select dans le formulaire)
la profession (select)
le secteur d’activité (select)

Tout d’abord lecture de la table :

<?php
    mysql_select_db($database_conn, $conn);
    $sql="SELECT * from spip_connaitre;";
    $Result1 = mysql_query($sql, $conn) or die(mysql_error());
    $row_Rs = mysql_fetch_assoc($Result1);
    $total = mysql_num_rows($Result1);

{// initialisation des tableaux}

    $sexe=array("Femme" => 0, "Homme"=>0);
    $age = array("< 20"=>0, "20-29"=>0, "30-39"=>0, "40-49"=>0, "50-59"=>0, "60-69"=>0,"> 69"=>0);
    prof=array("Ouvrier"=>0,"Employé"=>0,"Cadre"=>0,"Cadre Supérieur"=>0,"Dirigeant"=>0,"Sans emploi"=>0);
    $secteur=array("Agriculture"=>0,"Commerce et Artisanat"=>0,"Finances et Banque"=>0,"Fonction publique d état"=>0,"Fonction publique territoriale"=>0,"Industrie"=>0,"Santé"=>0,"Services"=>0,"Tourisme"=>0);

{// remplissage des tableaux}

    do {
        $sexe[$row_Rs["sexe"]]+=1;
        $age[$row_Rs["age"]]+=1;
        $prof[utf8_encode($row_Rs["profession"])]+=1;
        $secteur[utf8_encode($row_Rs["secteur"])]+=1;
    }while($row_Rs = mysql_fetch_assoc($Result1));
?>

ensuite, dans le head du squelette :

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');

{// ici on charge l'api avec le tableau php}

    data.addRows([<?php 
       $tab="";
       foreach($sexe as $key=>$value){
	   if($tab!=""){$tab.=",";} // met une virgule après les valeurs sauf la dernière
	   $tab.="['".$key."',".$value."]";
       }
       echo $tab;
       ?>]);
 // Set chart options
        var options = {'title':'Répartition par genre',
           'width':465,
	   'is3D':true,
            'height':300};

// Instantiate and draw our chart, passing in some options.
       var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
</script>

Enfin, dans le body :

<div id="chart_div"></div>

On fait la même chose pour les autres données et le tour est joué...

Si quelqu’un veut m’aider à réécrire ça de façon plus élégante, je suis preneur.