PHP

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Un cours complet pour maîtriser Correction exercices utilisation de l'API GoogleCharts : Série 01-2.

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

Objectifs
- Être capable d'utiliser l'API GoogleCharts

Exercice 02

Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice

Solution

Nous construisons trois fichiers, le premier est connexionDB.php dont le continu est:
Le continu du deuxième fichiers "villeVentes.php est:

Le continu du troisième fichier ce modifie selon le graphique

Un graphique en barres

Les graphiques à barres Google sont rendus dans le navigateur à l'aide de SVG ou VML , selon ce qui convient au navigateur de l'utilisateur. Comme tous les graphiques Google, les graphiques à barres affichent des info-bulles lorsque l'utilisateur survole les données.
La plupart des graphiques en barres sont conçus horizontalement, ce qui fait la différence avec les diagrammes en colonnes. En général, les graphiques en barres montrent les catégories sur l'axe des y (l'axe vertical) et les valeurs sur l'axe des x (l'axe horizontal).
Il existe 3 types de grands diagrammes en barres contenant le graphique en barres simple, le diagramme en barres empilées et le graphique en barres groupées.

Graphique à barres de base avec style par défaut

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          $.ajax({
            url: "sousCategoriesVentes.php",
            async: false
          }).responseJSON
        );
        var options = {
          title: 'Somme des ventes classées par sous catégorie',
          hAxis: {
            title: 'Les ventes'
          },
          vAxis: {
            title: 'Sous catégories'
          },          
        };
        var chart = new google.visualization.BarChart(document.getElementById('corechart'));
        chart.draw(data, options);   
      }
    </script>
  </head>
  <body>
    <div id="corechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Rendu

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Ce graphique présente la valeur des ventes de chaque sous catégorie de manière intuitive et visuelle pour permettre une comparaison des différentes sous catégories.
On remarque bien que la sous catégorie "Phones" est au sommet du graphique et représente le chiffre le plus élevé

Graphique à barres avec annotation

<?php
   include("connexionBD.php");
   $requete="SELECT p.SubCategory as 'Categorie',sum(s.Sales) 
   as 'Ventes' FROM sales as s, product as p
  where s.`ProductID`=p.ProductID 
   GROUP BY p.SubCategory  order by sum(s.Sales)  desc";
   $result = $pdo->query( $requete);
   /*
    while($row = $result->fetch(PDO::FETCH_ASSOC)){
         $provinces.= "[{v:'".$row['State-key']."',f:'".$row['State']."'}, ".$row['clients']."],";
   }
   */
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
  <body style="text-align: center;">
    <div id="regions_div" style="width: 900px; height: 800px;"></div>
    <script type="text/javascript">

      google.charts.load('current', {
        'packages':['corechart']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ["Categorie", "Ventes", { role: 'annotation'} ],
            <?php
                while($row = $result->fetch(PDO::FETCH_ASSOC)){
                    echo "['".$row['Categorie']."',".$row['Ventes'].",'".$row['Ventes']."'],";
                }
            ?>
        ]);
        var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                             { calc: "stringify",
                               sourceColumn: 1,
                               type: "string",
                               role: "annotation" },
                       2]);

        var options = {
          title: 'Somme des ventes classées par sous catégories',
          hAxis: {
            title: 'Les ventes'
          },
          vAxis: {
            title: 'Sous catégories'
          },
          annotations: {
          alwaysOutside: false,
          textStyle: {
          fontSize: 12
        }},
        };
        var chart = new google.visualization.BarChart(document.getElementById("regions_div"));
        chart.draw(view, options);
        chart.draw(data, options);
      }
    </script>
  </head>
  </body>
</html>

Rendu

Graphique à barres de base avec style personnalisé

var options = {
          bar: {groupWidth: "90%"},
          title: 'Somme des ventes de différentes sous-catégories',
          backgroundColor:'#F8F9F9',
          colors:['#99CCFF'],
          hAxis: {
            title: 'Les ventes',
            minValue: 0,
            textStyle : { fontSize: 14,color: '#cc00ff'}
          },
          vAxis: {
            title: 'Sous catégories',
            textStyle : { fontSize: 14,color: '#ff00cc'}
          },          
          is3D: true,
          titleTextStyle: {            
            color: '#cc00cc',    // any HTML string color ('red', '#cc00cc')
            fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 36, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: true,   // true of false
          },
          legend: {position: 'bottom', textStyle: {fontSize: 16}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('corechart'));
        chart.draw(data, options);

Rendu

Graphique à barres verticale avec style personnalisé

var options = {
          bar: {groupWidth: "90%"},
          title: 'Population mondiale',
          backgroundColor:'#F8F9F9',
          colors:['#cc4400'],
          vAxis: {
            title: 'Total Population',
            minValue: 0,
            textStyle : { fontSize: 14,color: '#cc00ff'}
          },
          hAxis: {
            title: 'Continents',
            textStyle : { fontSize: 14,color: '#ff00cc'}
          },          
          is3D: true,
          titleTextStyle: {            
            color: '#cc00cc',    // any HTML string color ('red', '#cc00cc')
            fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 36, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: true,   // true of false
          },
          legend: {position: 'bottom', textStyle: {fontSize: 16}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('corechart'));
        chart.draw(data, options);

Rendu

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Graphiques à barres de matériaux

La création d'un graphique à barres de matériaux est similaire à la création de ce que nous appellerons désormais un graphique à barres "classique". Vous chargez l'API Google Visualization (bien qu'avec le package 'bar' au lieu du package 'corechart'), définissez votre table de données, puis créez un objet (mais de classe google.charts.Bar au lieu de google.visualization.BarChart).
Les graphiques à barres de matériaux sont généralement utilisés lorsqu'une catégorie se divise naturellement en composants. Par exemple, considérons les ventes et les profits, divisées par toutes les sous catégories :

Fichier "sousCategoriesVentesProfit.php"

<?php
    // Connexion à la base de données 
    include("connexionBD.php");

    // Indique au navigateur qu'on envoie du JSON
    header("Content-Type: application/json");
    // Récupération des résultats de la requête dans un tableau
    $requete="SELECT p.SubCategory as 'Categorie',sum(s.Sales),sum(s.profit)
    as 'Ventes' FROM sales as s, product as p
   where s.`ProductID`=p.ProductID
   GROUP BY p.SubCategory ORDER BY sum(s.Sales) desc";
    $result = $pdo->query( $requete)
                ->fetchAll(PDO::FETCH_NUM); 
    // On ajoute les noms de colonne au début du tableau
    array_unshift($result, array("Categories", "Ventes","Profit"));
        // Envoi au format JSON
        echo json_encode($result, JSON_NUMERIC_CHECK); 
?>

Fichier sousCategoriesVentesProfit.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          $.ajax({
            url: "sousCategoriesVentesProfit.php",
            async: false
          }).responseJSON
        );
        var options = {
          title: 'Ventes et profits de différentes sous-catégories',
          chartArea: {width: '50%'},
          backgroundColor:'#F8F9F9',
          hAxis: {
            title: 'Ventes & profits',
            minValue: 0
          },
          vAxis: {
            title: 'Sous catégories'
          },
          titleTextStyle: {            
            color: '#cc00cc',    // any HTML string color ('red', '#cc00cc')
            fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 36, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: true,   // true of false
          },
        };

        
        
        
        
        
        
        
        var chart = new google.visualization.BarChart(document.getElementById('corechart'));
        chart.draw(data, options);   
      }
    </script>
  </head>
  <body>
    <div id="corechart" style="width: 1600px; height: 1200px;"></div>
  </body>
</html>

Rendu

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Un diagramme circulaire

Le diagramme circulaire ou graphique en secteurs (traduit par pie chart en anglais), appelé également camembert en France est un graphique utilisé en statistiques permettant de représenter des valeurs/catégories par des parts proportionnelles. Cela consiste en un cercle séparé en son centre en plusieurs parties. Chaque tranche (secteur) représente une proportion de chaque catégorie, tandis que le cercle complet représente la somme totale de toutes les données, égale à 100 %.
Les diagrammes circulaires peuvent permettre au lecteur d'avoir une idée rapide de la distribution proportionnelle des données.
Le pie chart sert à exprimer la proportion d’une catégorie dans un tout et ainsi à savoir quelle catégorie est plus grande qu’une autre.

Graphique circulaire avec style personnalisé

function drawChart() {
        var data = google.visualization.arrayToDataTable(
          $.ajax({
            url: "villeVentes.php",
            async: false
          }).responseJSON
        );
        var options = {
          title: 'Somme des ventes de différentes sous-catégories',
          backgroundColor:'#F8F9F9',
          is3D: true,
          titleTextStyle: {            
            color: '#cc00cc',    // any HTML string color ('red', '#cc00cc')
            fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 36, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: true,   // true of false
          },
          legend: {textStyle: {fontSize: 16}}
        };
        var chart = new google.visualization.PieChart(document.getElementById('corechart'));
        chart.draw(data, options);   
      }

Rendu

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Graphique circulaire à secteurs éclaté

var options = {
          title: 'Somme des ventes de différentes sous-catégories',
          backgroundColor:'#F8F9F9',
          is3D: true,
          titleTextStyle: {            
            color: '#cc00cc',    // any HTML string color ('red', '#cc00cc')
            fontName: 'Times New Roman', // i.e. 'Times New Roman'
            fontSize: 36, // 12, 18 whatever you want (don't specify px)
            bold: true,    // true or false
            italic: true,   // true of false
          },
          legend: {textStyle: {fontSize: 16}},
          slices: {  
            16: {offset: 0.2},
            8: {offset: 0.3},
            15: {offset: 0.3},
            13: {offset: 0.4}               
         }
        };

Rendu

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Graphique à nuage de points

Le graphique à nuage de points génère des coordonnées numériques en abscisse (axe horizontal X) et en ordonnée (axe vertical Y). Utilisez un graphique à nuage de points pour déterminer dans quelle mesure une variable est affectée par une autre. Vous pouvez, par exemple, tracer les données correspondant au salaire des employés et à leurs années d'expérience.
Un nuage de points est capable d'afficher une très grande quantité de valeurs (ce qui est compliqué avec un diagramme linéaire, et impossible avec un camembert) et il sera utilisé pour comprendre des relations entre des variables.

Une carte géographique

Une carte géographique est une carte d'un pays, d'un continent ou d'une région avec des zones identifiées de l'une des trois manières suivantes :
1. Le mode région colore des régions entières, telles que des pays, des provinces ou des états.
2. Le mode marqueurs utilise des cercles pour désigner les régions qui sont mises à l'échelle en fonction d'une valeur que vous spécifiez.
3. Le mode texte étiquette les régions avec des identifiants (par exemple, "Russie" ou "Asie").
Pour ce graphique on utilise deux fichiers seulement celui de la connexion et le suivant:

Le style regions

<?php
   include("connexionBD.php");
   $requete="SELECT `State-key`,count(*) as 'clients',State FROM `customer` where 'State-key' <> '' GROUP by `State-key`";
   $result = $pdo->query( $requete);
   $provinces='';
   while($row = $result->fetch(PDO::FETCH_ASSOC)){
    $provinces.= "[{v:'".$row['State-key']."',f:'".$row['State']."'}, ".$row['clients']."],";
                }
                echo $provinces;
                //{v:'US-TX',f:'Texas'}
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style type="text/css">
        #geochart{
            width: 1200px;
            height: 800px;
            margin: auto;
        }
    </style>
  </head>
  <body style="text-align: center;background: #f7fcff;">
   
  
    <div id="geochart" style=""></div>

    <script type="text/javascript">
      
      google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyCCawePzzYG1vuejEsyWd8GKI77KKlOaVk'
     });
      google.charts.setOnLoadCallback(drawRegionsMap);
      
      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['State', 'Clients'], <?php echo $provinces;?>
        ]);

        var options = {
        region: 'US', // US
        colorAxis: {
            colors: ['#ffcccc', '#99ff66']
        },
        backgroundColor: '#81d4fa',

        datalessRegionColor: '#f2f2f2',
        defaultColor: '#F7FCFF',
      displayMode: 'regions',
      resolution: 'provinces',
    };
    
        var chart = new google.visualization.GeoChart(document.getElementById('geochart'));

        chart.draw(data, options);
      }
    </script>
  </body>
</html>

Rendu

Écriture dans un fichier en PHP

Les fichiers en PHP : Série 01

Correction exercices utilisation de l'API GoogleCharts : Série 01-2

Sommaire du cours

Autres catégories

Objectifs

Exercice 02

Énoncé

Solution

Un graphique en barres

Graphiques à barres de matériaux

Un diagramme circulaire

Graphique à nuage de points

Une carte géographique

Cours PHP