Halo semua,
Dalam tutorial singkat ini kita akan membahas contoh Google Chart laravel 8. Anda akan belajar grafik dinamis di laravel 8. Tutorial ini akan memberi Anda contoh sederhana bagaimana menggunakan grafik google di laravel 8. itu contoh sederhana dari contoh grafik garis google laravel 8. Jadi, mari kita ikuti beberapa langkah untuk membuat contoh laravel 8 contoh google charts api.
Saat ini, Google memiliki beberapa API populer seperti peta, bagan, analitik, dll. Bagan Google JS API juga sangat populer dan cukup mudah untuk diintegrasikan dengan aplikasi atau proyek kami. Pada postingan kali ini, saya akan memberikan contoh diagram garis Google, Cara menggunakan diagram garis Google di aplikasi laravel Anda.
Google grafik js menyediakan beberapa grafik lainnya seperti grafik batang, grafik Area, Grafik Kolom, Grafik Pie, Grafik GEO dll. Dalam posting ini kita akan menggunakan grafik garis dengan cara grafis yang baik. Anda dapat menggunakan aplikasi laravel Anda, Anda cukup mengikuti beberapa langkah, setelah Anda bisa mendapatkan output seperti di bawah pratinjau.
Pratinjau:
Langkah 1: Instal Laravel
pertama-tama kita perlu mendapatkan aplikasi Laravel baru menggunakan perintah di bawah, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogFirebaseLangkah 2: Buat Migrasi dan Model
kami perlu membuat tabel baru "visitors" sehingga kami akan mendapatkan data dari tabel ini, Anda dapat menggunakan tabel Anda sendiri tetapi ini adalah contoh. Kita harus membuat tabel migrasi untuk pengunjung menggunakan perintah Laravel 8 php artisan, jadi jalankan perintah di bawah ini:
php artisan make:migration create_visitor_tableSetelah perintah ini Anda akan menemukan satu file di database/migrations path berikut dan Anda harus meletakkan kode di bawah ini di file migrasi Anda untuk membuat tabel visitors.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateVisitorTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('visitors', function (Blueprint $table) {
$table->id();
$table->integer('click');
$table->integer('viewer');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('visitor');
}
}Oke, sekarang Anda bisa menambahkan beberapa record seperti di bawah ini:
Mari buat model menggunakan perintah di bawah ini:
php artisan make:model Visitorapp/Http/Controllers/HomeController.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Visitor extends Model
{
use HasFactory;
}Langkah 3: Tambahkan Route
Pada langkah ini kita perlu menambahkan route untuk menghasilkan tampilan. jadi buka file route Anda dan tambahkan route berikut.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('google-line-chart', [HomeController::class, 'googleLineChart']);Langkah 4: Buat Controller
Jika Anda belum memiliki HomeController maka kita harus membuat pengontrol baru sebagai HomeController di jalur ini app/Http/Controllers/HomeController.php . Pastikan Anda harus memiliki tabel visitorsdengan beberapa data. pengontrol ini akan mengelola data dan memetakan data dan melihat file, jadi letakkan konten di bawah ini di file controller:
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Visitor;
use DB;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function googleLineChart()
{
$visitor = Visitor::select(
DB::raw("year(created_at) as year"),
DB::raw("SUM(click) as total_click"),
DB::raw("SUM(viewer) as total_viewer"))
->orderBy(DB::raw("YEAR(created_at)"))
->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('google-line-chart')
->with('visitor',json_encode($result));
}
}Langkah 5: Buat File View
Pada langkah terakhir, kita harus membuat file view "google-line-chart.blade.php" untuk menghasilkan view chart, jadi buat file google-line-chart dan masukkan kode di bawah ini:
resources/view/google-line-chart.blade.php
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<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>
</head>
<body>
<h1>Laravel Google Chart Example - Medikre.com</h1>
<div id="linechart" style="width: 900px; height: 500px"></div>
</body>
</html>Sekarang Anda dapat menjalankan dan memeriksa.
Saya harap ini dapat membantu Anda ...
google chart laravel example tutorial
andriajah