Google Chart example in Laravel 8
Google chart is simple, open-source and free Javascript chart library. Google chart provides live bar chart, pie chart, geo chart etc.
In this example, I will show you how to implement Google chart in your Laravel application. Google chart displays data in admin panel. We will implement Google chart step by step from the scratch
Step 1: Install Laravel application
The first step, we need to create a new Laravel application using below command. Open your Terminal or CMD and run the below command.
composer create-project --prefer-dist laravel/laravel chartStep 2: Database configuration
Now we need to configure database at .env file. Open file and change database name and password as below:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=chart
DB_USERNAME=root
DB_PASSWORD=rootStep 3: Create and run migration
We need to create a table to show data from database. So run the below command to create Laravel migration.
php artisan make:migration create_units_tableThis will create a migration file at database/migrations folder. Open file and add new table fields in it.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUnitsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('units', function (Blueprint $table) {
$table->id();
$table->string('day');
$table->integer('units');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('units');
}
}And now run the migrate command to create a table.
php artisan migrateWe will also need random data to show on chart. You can use Laravel factory to create data. Or run the below query in MySQL Command Line.
INSERT INTO `units`(`id`, `day`, `sales_unit`, `expense`) VALUES
(NULL,'Monday',1000,400), (NULL,'Tuesday',1120,300),(NULL,'Wednesday',1350,420),(NULL,'Thursday',950,210),(NULL,'Friday',1600,560),(NULL,'Saturday',700,110),(NULL,'Sunday',730,120);Step 4: Create a model
In this step, create a model using below command. We will fetch data using model class.
php artisan make:model UnitStep 5: Create a controller class
In this step, create a controller class using below command.
php artisan make:controller ChartControllerThis will create a controller file at app/Http/Controllers folder. Open file and add index() method.
Step 6: Create a route
In this step, we will create a route to view chart. So open routes/web.php file and add a new route.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChartController;
Route::get('chart', [ChartController::class, 'index'])->name('index');Step 7: Create view
In this last step, we will create a index.blade.php view file at resources/views folder. So create a file and add a below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var units = {!! $data !!}
console.log(units);
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(units);
var options = {
title: 'Sales unit Line Chart',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 1200px; height: 500px"></div>
</body>
</html>Now run the Laravel server using below command:
php artisan serveIn your browser open http://localhost:8000/chart url.
In this article, you have learned to implement Google Chart in Laravel. Thank you for giving time to read the article.
Copyright 2023 HackTheStuff
