Comment utiliser l’API GoogleCharts avec MySQL

Comment utiliser l’API GoogleCharts avec MySQL

  1. Objectifs

    • Être capable de créer des graphiques avec l’API google chart avec MySQL.
  2. Présentation

    • Les diagrammes ou les graphiques sont utilisés pour la représentation graphique des données et sont utiles lorsque vous souhaitez afficher vos données ou informations sous forme d’aperçu rapide.
    • L’API Google Chart permet de créer des graphiques très rapidement. Il se connecte aux données en temps réel à l’aide d’une variété d’outils de connexion de données.
    • Les échanges de données entre un serveur web et un navigateur doivent se faire au format texte uniquement.
    • Avec GoogleCharts, les données utilisées par GoogleCharts doivent être envoyées au navigateur au format JSON (JavaScript Object Notation).
    • JSON est un format d’échange de données basé sur JavaScript, il permet de décrire des tableaux, des objets, etc.
    • Dans ce tutoriel, nous allons créer des scripts PHP pour transformer les données retournées par le serveur MySQL vers le format JSON, afin de pouvoir les utiliser avec GoogleCharts.
  3. Créer les tables dans la base de données MySQL

    • Pour la suite de ce tutoriel, nous utiliserons la base de données “world” qui contient des informations sur les pays et villes dans le monde. Le schéma de cette base est le suivant :
      • city(ID, Name, CountryCode, District, Population)
      • country(Code, Name, Continent, Region, SurfaceArea, IndepYear, Population, LifeExpectancy, GNP, GNPOld, LocalName, GovernmentForm, HeadOfState, Capital, Code2)
      • countrylanguage(CountryCode, Language, IsOfficial, Percentage)
      • Comment utiliser l’API GoogleCharts avec MySQL

    • Utiliser les fichiers suivants pour remplir les tables:
  4. Utiliser PHP pour accéder à la base de données MySQL

    • Pour accéder à la base de données MySQL “world“, nous utilisons l’API PDO de PHP
    • Créer le fichier ConnexionBD.php suivant:
    • Comment utiliser l’API GoogleCharts avec MySQL

  5. Conversion des données en JSON

    • Nous allons utiliser PHP pour accéder à la base de données MySQL “world“, afin de réaliser les étapes suivantes :
      1. Récupérer tous les résultats de la requête sous forme de tableau (fetchAll),
      2. Ajouter en premier élément de ce tableau les noms des colonnes (array_unshift),
      3. Transformer le résultat en JSON (json_encode).
    • Le script PHP suivant effectue ces opérations pour retourner les données du nombre de pays dans chaque continent :
      • Comment utiliser l’API GoogleCharts avec MySQL

    • Testez le script nbpays.php en l’envoyant avec Filezilla sur le serveur “127.0.0.1” dans le nouveau répertoire TP_GoogleCharts, et vérifiez que vous obtenez bien des données au format JSON.
    • Données JSON pour le nombre de pays par continent (onglets JSON / Données brutes)
    • Comment utiliser l’API GoogleCharts avec MySQL

      Pour ceux qui utilisent Chrome, il faut installer l’extension JSON Formatter pour voir les données au format JSON : https://chrome.google.com/webstore/detail/jsonformatter/bcjindcccaagfpapjjmafapmmgkkhgoa/related?hl=fr

  6. Utiliser les données JSON avec GoogleCharts

    • Il faut maintenant faire en sorte que l’API GoogleCharts effectue une requête au serveur pour obtenir les données au format JSON pour le rendu. On utilise le code HTML/JavaScript
    • Code HTML/Javascript
      Comment utiliser l’API GoogleCharts avec MySQL
      Rendu

      Comment utiliser l’API GoogleCharts avec MySQL

  7. Application 01

    1. Énoncé
      • Utiliser la base de données “world” crée précédemment pour visualiser la corrélation entre le nombre d’habitants dans les villes européennes et
        nord-américaines de plus de 500000 habitants et la population du pays correspondant.
    2. Réponse
      • Nous allons utiliser la requête SQL suivante :
        • Comment utiliser l’API GoogleCharts avec MySQL

  8. Application 02

    1. Énoncé
      • Utiliser la base de données “world” crée précédemment pour visualiser des données (population) sous la forme d’une carte.
      • Le schéma suivant décrit le résultat souhaité
        • Comment utiliser l’API GoogleCharts avec MySQL

    2. Réponse
      • Télécharger la réponse ou demander à l’admin par mail (hajjriadh@gmail.com)



Abonnez vous à notre chaîne YouTube gratuitement