Intégrer Google Charts dans Laravel
Intégrer Google Charts dans Laravel
-
Objectifs
- Etre capable d’ntégrer Google Charts dans Laravel8
-
Présentation
- De nos jours, Google dispose de plusieurs API populaires telles que la carte, le graphique, l’analyse, etc.
- L’API JS de Google charts est également très populaire et elle est assez simple à intégrer à notre application ou à nos projets.
- Les graphiques Google js fournissent plusieurs autres graphiques tels que le graphique à barres, le graphique en aires, le graphique à colonnes, le graphique à secteurs, le graphique GEO, etc.
- Dans cet article, nous utiliserons un graphique en courbes avec une bonne manière graphique. vous pouvez utiliser dans votre application laravel, il vous suffit de suivre quelques étapes, après que vous puissiez obtenir la sortie en tant qu’aperçu ci-dessous.
-
Intégrer Google Charts dans Laravel
- La documentation sur la galerie Google Charts présente le code source à utiliser pour reproduire un diagramme sélectionné.
- La technique pour intégrer un diagramme dans un projet Laravel consiste à copier le code source présenté, le ramener (coller) sur une page ou une vue (template Blade), le personnaliser et adapter les données à celles de votre application :
- Copier le code source d’un chart depuis la galerie Google Chart
- Coller le code source du chart sur votre page ou template Blade
- Remplacer les valeurs du chart par celles de votre application
-
Exemples d’intégration Google Pie et Bar Charts
-
Exemple 1 : Intégrer Google Pie Chart
- Pour créer un graphique à secteurs, nous voulons avoir besoin de certaines données dans notre base de données. Nous avons donc ici une table Etudiant, que nous avons crée dans cet article.
- Dans cette table, nous avons inséré des données sur les étudiants. À partir de ces données, nous voulons afficher le pourcentage d’étudiants et d’étudiantes inscrits.
- Définir une route
- Il s’agit de la deuxième étape et dans cette étape, nous devons définir une route pour créer une vue dans le navigateur. Pour cela, nous devons ouvrir le fichier routes/webs.php et y écrire le code de route suivant:
Route::get('/laravel_google_chart', 'GoogleGraphController@index'); - Créer un contrôleur
- Dans cette étape, nous allons d’abord créér un Controller dans notre application Laravel. Pour cela, nous devons aller à l’invite de commande et écrire la commande suivante:
php artisan make:controller GoogleGraphController - La commande ci-dessus créera le contrôleur dans app/Http/Controllers/GoogleGraphController.php Nous devons ouvrir ce contrôleur et créer la méthode index() dedans pour récupérer les données de la table etudiants et les convertir en chaîne json et enfin, il enverra ces données pour afficher le fichier .
- Alors, récupérez le code source ci-dessous.
- Créer un fichier de vue
- Cette dernière étape pour savoir comment utiliser l’API Google Chart dans Laravel et dans cette étape, nous devons créer le fichier de vue google_pie_chart.blade.php dans le dossier resources/views.
- Ceci est notre sortie qui affichera le graphique sur la page Web dans le navigateur. Dans ce fichier, nous avons écrit du code javascript pour générer un graphique à secteurs à l’aide de l’API Google Chart et les données ont été obtenues à partir du contrôleur Laravel.
- Rendu
- Après l’exécution de votre serveur vous obtiendrez le rendu suivant pour les données :
-
Exemple 2 : Intégrer Google Pie Chart 3D
- Si vous définissez l’option
is3D sur true, votre graphique à secteurs sera dessiné comme s’il avait trois dimensions:
var options = {title : "Pourcentage d'étudiants masculins et féminins",is3D: true};
