Dynamic Bar Charts Example Using Google Charts in Laravel 7

Hello Artisan

Hope you are doing well. In this tutorial i am going to discuss about laravel charts. That in this tutorial i will show you how we can display bar chart or how we can create bar chart dynamically in laravel 7. 

To do this laravel dynamic bar charts i will use google charts. Google Charts provides a perfect way to visualize data on your website.Using this google charts i will show you how we can show our product data info in bar charts. It will be a simple demo tutorial on laravel bar charts.

I will just create a simple product model and a product controller to create this laravel google charts example. Then i will fetch product data from database and finally set in google bar chart function. 

If you don't know how to make laravel dynamic data chart or how to use google charts with laravel, don't worry. You are a right place. I will help you to learn step by step how to use google charts to visualize data on your website in laravel.

Step 1: Download Laravel 7

In this step we need to download our fresh laravel app. So download it by the below command.

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

Step 2: Create Route

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

routes/web.php

Route::get("barcharts", "ProductController@get_all_products");

Step 3: Create Model and Factory

We need a product table to create dynamic laravel charts. Also we need factory to generate some fake dummy products. So create it using below command.

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 create some fake data.

php artisan tinker
//then
factory(\App\Product::class,100)->create()

After running this command we will get 100 product in our products table.

Step 4:  Create Controller

Now time to create product controller to write our get all product function to fetch products from database. So create it via below command.

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()
    {
       $products = \App\Product::all();
       return view('product',['products' => $products]);   
    }
}

Step 5:  Create Blade File

Now we have to create our product.blade.php to generate our products bar charts. So create it in your views folder.

resources/views/product.blade.php

Read also : Laravel 7 Highcharts | Laravel Charts Tutorial Example

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

Hope it will work for you.