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

app/Product.php

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.

database/migrations/creates_products_table.php

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string("name")->nullable();
    $table->string("sku")->nullable();
    $table->string("description")->nullable();
    $table->string("price")->nullable();
    $table->integer("quantity");
    $table->integer("sales");
    $table->timestamps();
});

now run migrate command.

php artisan migrate

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

database/factories/ProductFactory.php

/** @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
//then
factory(\App\Product::class,100)->create()

Step 3: Create Route

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

routes/web.php

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.

app/Http/Controllers/ProductController.php

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.

resources/views/pie.blade.php

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.