Google Line Chart Example in Laravel

Google line chart example in laravel. In this example, I explain google line chart example in laravel. We will how to use google chart example in laravel. Also, you will learn dynamic charts in laravel. Google  line charts use to visualize data on your website.

In this post, you will learn dynamic google line charts in laravel. We can simply create google chart in laravel 6, laravel 7 and laravel 8.

Google charts js provide several other charts like bar chart, Column Chart, Area chart, Pie Chart, GEO Chart etc. You can learn example of Google line chart. you learn step by step google line chart in your laravel application.

Read Also : Laravel Google Pie Chart Example

How to use Google Line Chart in Laravel

Step 1: Install Laravel 

In this step, I install fresh laravel package for google line chart in laravel. So let’s following command to install laravel.

composer create-project --prefer-dist laravel/laravel google_linechart
Step 2 : Create Migration Table

In this step, you can create migration of product table. In this table we getting dynamic data for google line chart. So let’s following command:

php artisan make:migration create_products_table --create=products
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name')->nullable();
            $table->integer('price')->nullable();
            $table->integer('year')->nullable();
            $table->string('product_type')->nullable();
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

After run the following command to create table.

php artisan migrate

Step 3: Add Route

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LinechartController;


Route::get('linechart', [LinechartController::class,'linechart']);

 Step 4 : Create Controller

After adding route we need to create new controller for google linechart example. So, let’s below command in your terminal for create controller.

php artisan make:controller LinechartController

Step 5: Create Model

In this step, We will create model for google line chart in laravel using the following command:

php artisan make:model Product
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class LinechartController extends Controller
{
    public function linechart(Request $request)
    {
    	$phone_count_18 = Product::where('product_type','phone')->where('year','2018')->get()->count();
    	$phone_count_19 = Product::where('product_type','phone')->where('year','2019')->get()->count();
    	$phone_count_20 = Product::where('product_type','phone')->where('year','2020')->get()->count();   	
    	
    	$laptop_count_18 = Product::where('product_type','laptop')->where('year','2018')->get()->count();
    	$laptop_count_19 = Product::where('product_type','laptop')->where('year','2019')->get()->count();
    	$laptop_count_20 = Product::where('product_type','laptop')->where('year','2020')->get()->count();

    	$tablet_count_18 = Product::where('product_type','tablet')->where('year','2018')->get()->count();
    	$tablet_count_19 = Product::where('product_type','tablet')->where('year','2019')->get()->count();
    	$tablet_count_20 = Product::where('product_type','tablet')->where('year','2020')->get()->count();    
    	
    	return view('linechart',compact('phone_count_18','phone_count_19','phone_count_20','laptop_count_18','laptop_count_19','laptop_count_20','tablet_count_18','tablet_count_19','tablet_count_20'));
    }
}

Step 6 : Create Blade File

In this step we will create linechart.blade.php file for display google line chart.

<html>
<head>
    <title>Laravel Google Line Chart Example- web-tuts.com</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
</head>
<body>
    <h2 style="margin:50px 0px 0px 0px;text-align: center;">Laravel Google Line Chart Example- web-tuts.com</h2>
    <div id="linechart" style="width: 900px; height: 500px; margin-left: 235px"></div>
    <script type="text/javascript">
        var phone_count_18 = <?php echo $phone_count_18; ?>;
        var phone_count_19 = <?php echo $phone_count_19; ?>;
        var phone_count_20 = <?php echo $phone_count_20; ?>;

        var laptop_count_18 = <?php echo $laptop_count_18; ?>;
        var laptop_count_19 = <?php echo $laptop_count_19; ?>;
        var laptop_count_20 = <?php echo $laptop_count_20; ?>;

        var tablet_count_18 = <?php echo $tablet_count_18; ?>;
        var tablet_count_19 = <?php echo $tablet_count_19; ?>;
        var tablet_count_20 = <?php echo $tablet_count_20; ?>;

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
             var data = google.visualization.arrayToDataTable([
          ['Year', 'Phone', 'Laptop', 'Tablet'],
          ['2018',  phone_count_18, laptop_count_18, tablet_count_18],
          ['2019',  phone_count_19, laptop_count_19, tablet_count_19],
          ['2020',  phone_count_20, laptop_count_20, tablet_count_20]
        ]);
            var options = {                
                curveType: 'function',
                legend: { position: 'bottom' }
            };
            var chart = new google.visualization.LineChart(document.getElementById('linechart'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>

Output

Read Also :  Codeigniter Paypal Integration Example Tutorial

Laravel Google Line Chart Example

I hope you understand google line chart example and it can help you..