Dynamic Pie Charts Example Using Google Charts API In Laravel 7

Hello Artisan

In this tutorial i will show you laravel chart example from scratch. I will discuss about laravel charts step by step so that you can understand. To create dynamic pie chart in laravel i will use google chart api. 

Google Charts provides a perfect way to visualize data on your website. You can do dynamic pie chart in laravel using chart js with laravel. But here i will use google chart.

In this tutorial i will show you 2d and 3d pie chart where you can show that how to change google chart options. If you don't know how to use google chart to make pie chart, then you are a right place.

In this tutorial i will create a product table and then we will create 2d and 3d pie chart from product data. So let's create dynamic charts in laravel using google charts api with laravel.


Step 1: Install Laravel 7

In this step we have to download our fresh laravel app so that we can start from scratch. So run below command to download it

composer create-project --prefer-dist laravel/laravel blog


Step 2: Create Model and Migration

Now time to create our product table and migration.

php artisan make:model Product -fm

Now open product model and set it like below


namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
    protected $guarded = [];

After doing it we need to create our migration to migrate our database.


Schema::create('products', function (Blueprint $table) {


now run migrate command.

php artisan migrate


Now we have to create our factory to generate some dummy products.


/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Product;
use Faker\Generator as Faker;

$factory->define(Product::class, function (Faker $faker) {
    return [
        "name"          =>  $faker->word,
        "sku"           =>  $faker->unique()->randomNumber,
        "description"   =>  \Str::random(20),
        "price"         =>  $faker->numberBetween(1000, 10000),
        "quantity"      =>  $faker->numberBetween(1,100),
        "sales"         =>  $faker->numberBetween(1,100)


Now open your terminal and paste it in your termial to insert some fake product in products table.

php artisan tinker


Step 3: Create Route

Now we need to create our route to fetch our data from database. Paste below code to web.php file.


Route::get("pie", "ProductController@get_all_products_for_pie_chart");


Step 4:  Create Controller

Now we need to create get_all_products_for_pie_chart method in product controller. So create it.

php artisan make:controller ProductController


Now open it and paste this below code.


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProductController extends Controller
    public function get_all_products_for_pie_chart()
        $products = \App\Product::all();
        return view('pie',compact('products')); 


Step 5:  Create Blade File

Now we have to create pie.blade.php file to visualize our dynamic pie chart in laravel. So create it and paste this below code.



Everything is set to go. Now if you visit products url, then you will see the below output. This is our dynamic pie charts in laravel. This iis the 2d example.



But if you want to make it 3d, you have to do one more things. Just go to options and set is3D equal true. 

 var options = {
    title: 'Product Details',
    is3D: true,

Then you will see the below output.



Hope this laravel pie chart tutorial can help you. This dynamic laravel pie chart tutorial now over. I have already created a tutorial on the topic of dynamic laravel bar chart. You can also read it.


Read also : Dynamic Bar Charts Example Using Google Charts in Laravel 7


Hope this laravel pie chart tutorial can help you.


#laravel-charts #dynamic-charts #pie-chart #laravel-6 #laravel-7 #example #tutorial #laravel