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.