Hello Devs,

In this tutorial, we are going to learn how to create google line chart in laravel application.

Given below is step by step process for laravel google line chart tutorial



Step 1 : 

Install Laravel App

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



Step 2 : 

Setup Database Configuration

open ".env" file and change the database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password



Step 4 :

 Create Table Migration and Model

php artisan make:model Post -m

/database/migrations/2020_06_25_100722_create_posts_table.php

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->integer('visitor');
            $table->integer('click');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Run this command:

php artisan migrate


app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title','visitor','click'];
}



Step 5 : 

Create Route

routes/web.php

Route::get('google-line-chart', 'PostController@googleLineChart');



Step 4 : 

Create Controller

php artisan make:controller PostController


app/http/controller/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use DB;

class PostController extends Controller
{
    public function googleLineChart()
    {
        $visitor = DB::table('posts')
                    ->select(
                        DB::raw("year(created_at) as year"),
                        DB::raw("SUM(click) as total_click"),
                        DB::raw("SUM(visitor) as total_viewer"))
                    ->groupBy(DB::raw("year(created_at)"))
                    ->get();

        $result[] = ['Year','Click','Viewer'];
        foreach ($visitor as $key => $value) {
            $result[++$key] = [$value->year, (int)$value->total_click, (int)$value->total_viewer];
        }

        return view('googleLineChart')
                ->with('visitor',json_encode($result));    
    }
}



Step 6 : 

Create Blade File

/resources/views/googleLineChart.blade.php

<html>
<head>
    <title>laravel google line chart tutorial example - Rathorji.in</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
</head>
<body>
    <h2 style="margin:50px 0px 0px 130px;">Laravel Google Line Chart Tutorial Example - Rathorji.in</h2>
    <div id="linechart" style="width: 900px; height: 500px;"></div>
    <script type="text/javascript">
        var visitor = <?php echo $visitor; ?>;
        console.log(visitor);
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable(visitor);
            var options = {
                title: 'Site Visitor Line Chart',
                curveType: 'function',
                legend: { position: 'bottom' }
            };
            var chart = new google.visualization.LineChart(document.getElementById('linechart'));
            chart.draw(data, options);
        }
    </script>
</body>
</html>


Run this command:

php artisan serve


Open this URL

http://localhost:8000/google-line-chart


I hope this example helps you.