PHP

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

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

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

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

Exercice 01

É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 "populationContinent.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.

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: "populationContinent.php",
            async: false
          }).responseJSON
        );
        var options = {
          title: 'Population mondiale',
          hAxis: {
            title: 'Total Population',
            minValue: 0
          },
          vAxis: {
            title: 'Continents'
          },          
        };
        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

Exercices utilisation de l'API GoogleCharts Série 01

Graphique à barres de base avec style personnalisé

var options = {
          bar: {groupWidth: "90%"},
          title: 'Population mondiale',
          backgroundColor:'#F8F9F9',
          colors:['#cc4400'],
          hAxis: {
            title: 'Total Population',
            minValue: 0,
            textStyle : { fontSize: 14,color: '#cc00ff'}
          },
          vAxis: {
            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.BarChart(document.getElementById('corechart'));
        chart.draw(data, options);

Rendu

Exercices utilisation de l'API GoogleCharts Série 01

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

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: "populationContinent.php",
            async: false
          }).responseJSON
        );
        var options = {
          title: 'Population mondiale',
          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

Graphique circulaire à secteurs éclaté

var options = {
          title: 'Population mondiale',
          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: {  
            1: {offset: 0.2},
            3: {offset: 0.3},
            6: {offset: 0.2}                 
         }

Rendu

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 Name as `Region`,`Population` FROM `country`";
   $result = $pdo->query( $requete);
?>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style type="text/css">
        #regions_div{
            width: 900px;
            height: 500px;
            margin: auto;
        }
    </style>Côte d'Ivoire
  </head>
  <body style="text-align: center;background: #f7fcff;">
   

    <div id="regions_div" style=""></div>

   
    <script type="text/javascript">
      
      google.charts.load('current', {
        'packages':['geochart']
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
            ['Region', 'Population'],
            <?php
                while($row = $result->fetch(PDO::FETCH_ASSOC)){
                    echo "['".$row['Region']."', ".$row['Population']."],";
                }
            ?>
        ]);

        var options = {
          title: 'Popularity of Country',
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
          legend:'none'
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        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

Sommaire du cours

Autres catégories

Objectifs

Exercice 01

Énoncé

Solution

Un graphique en barres

Un diagramme circulaire

Graphique à nuage de points

Une carte géographique

Cours PHP