Comment utiliser l’API GoogleCharts avec MySQL
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Créer les tables dans la base de données MySQL
- 4- Utiliser PHP pour accéder à la base de données MySQL
- 5- Conversion des données en JSON
- 6- Utiliser les données JSON avec GoogleCharts
- 7- Application 01
- 7.1- Énoncé
- 7.2- Réponse
- 8- Application 02
- 8.1- Énoncé
- 8.2- Réponse
- 8.2.1- Cours PHP
Comment utiliser l’API GoogleCharts avec MySQL
-
Objectifs
- Être capable de créer des graphiques avec l’API google chart avec MySQL.
-
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.
-
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)
- Utiliser les fichiers suivants pour remplir les tables:
- Pour remplir la table « city » ouvrir le fichier table « city »
- Pour remplir la table « country » ouvrir le fichier table « country »
- Pour remplir la table « countrylanguage » ouvrir le fichier table « countrylanguage »
-
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:
-
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 :
- Récupérer tous les résultats de la requête sous forme de tableau (
fetchAll), - Ajouter en premier élément de ce tableau les noms des colonnes (
array_unshift), - 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 :
- 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)
-
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
-
Application 01
-
É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. -
Réponse
- Nous allons utiliser la requête SQL suivante :
-
Application 02
-
É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é
-
Réponse
- Télécharger la réponse ou demander à l’admin par mail (hajjriadh@gmail.com)
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
Code HTML/Javascript
Rendu
