How to use google pie chart in laravel 9 Framework
LaravelGoogle Charts provides a perfect way to visualize data on website. It is very easy to display dynamic data day-wise, month-wise, year-wise on google pie chart in Laravel.
Here at Fixwebnode, we shall look into how to implement google pie chart in Laravel 9 application.
Table of contents [Show]
1. Install Laravel 9 Framework
To begin, you need to install the Laravel 9 Framework. You can do this by running the following command in your terminal:
$ composer create-project laravel/laravel your-project-name --prefer-dist
Now, Set up Database by creating or editing an .env file with the below information:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
2. Create a Route
Next, you need to create a route for the google pie chart in your routes/web.php file. Add the following code to the file:
use App\Http\Controllers\GooglePieChartController;
Route::get('/google-pie-chart', 'GooglePieChartController@index');
3. Create Controller
Now, create a controller for the Google Pie Chart. To do this, run the following command in your terminal:
$ php artisan make:controller GooglePieChartController
This will create a controller file in the app/Http/Controllers directory.
4. Add Google Pie Chart Script
Next, you need to add the Google Pie Chart Script in the controller file. Add the following code to the controller:
public function index()
{
$data = [
[
"label" => "Fruits",
"data" => [
["value"=>400],
["value"=>200],
["value"=>100],
["value"=>100]
]
],
[
"label" => "Vegetables",
"data" => [
["value"=>500],
["value"=>100],
["value"=>100],
["value"=>100]
]
]
];
return view('google_pie_chart', compact('data'));
}
5. Create View
Now, create a view for the Google Pie Chart. To do this, create a file named google_pie_chart.blade.php in the resources/views/ directory and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<title>Google Pie Chart Demo</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);
var options = {
title: 'Google Pie Chart',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="pie-chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
6. Testing
Finally, you can test the Google Pie Chart by visiting http://your-project-name.test/google-pie-chart in your browser.
[Need help in fixing Laravel App issues ? We can help you. ]
Conclusion
