How to use google pie chart in laravel 9 Framework

Laravel

Google 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.

 

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

Your Cart