Google Line Chart Example in Laravel 8

WebSolutionStuff | Feb-24-2021 | Categories : Laravel PHP jQuery

In this example we will see google line chart example in laravel 8, google charts use to visualize data on your website here we will see line chart example or google chart in laravel 8.

Line chart can also be used to compare changes over the same period of time for more than one group. So, here we will learn how to use google chart in laravel.

Here i have added few step of google line chart example in laravel 8.

Step 1 : Install Laravel

Step 2 : Create Migration

Step 3 : Add Route

Step 4 : Create Controller and Model

Step 5 : Create Blade File

 

Step 1: Install Laravel 8

Install new project in your laravel application for google line chart tutotrial.

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

 

 Step 2 : Create Migration Table

We are getting dynamic data for linechart example. So first, we need to create migration for "product" table using Laravel php artisan command, so first type below command:

php artisan make:migration create_products_table --create=products

After run this command you will find php file in this location "database/migrations/" in this file you need to add below code.

<?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 this we need to run this migration by following command in our terminal:

php artisan migrate

And after migration you need to add some records as per below screen print.

 

Step 3: Add Route

Now add route in Routes/web.php 

Route::get('linechart', '[email protected]');

 

 

 Step 4 : Create Controller And Model

After adding route we need to create new controller and model for google linechart example.So, type below command in your terminal for create controller.

php artisan make:controller LinechartController
php artisan make:model Product

 

Now add below code in your linechartcontroller.

<?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 5 : Create Blade File

In last we are creating blade file for view output of line chart, So copy below code in your linechart.blade.php file.

<html>
<head>
    <title>Laravel 8 Google Line Chart Tutorial - websolutionstuff.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 8 Google Line Chart Tutorial - websolutionstuff.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>

 

After all impliment of these steps you will get output of laravel 8 google line chart tutorial like below image.

 

Featured Post



Follow us
facebooklogo github instagram twitter