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 chart

Step 2: Database configuration

Now we need to configure database at .env file. Open file and change database name and password as below:


Step 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_table

This will create a migration file at database/migrations folder. Open file and add new table fields in it.


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) {

     * Reverse the migrations.
     * @return void
    public function down()

And now run the migrate command to create a table.

php artisan migrate

We 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 Unit

Step 5: Create a controller class

In this step, create a controller class using below command.

php artisan make:controller ChartController

This 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.


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>
        <script type="text/javascript" src=""></script>
        <script type="text/javascript">
          var units =  {!! $data !!}
          google.charts.load('current', {'packages':['corechart']});
          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);
        <div id="curve_chart" style="width: 1200px; height: 500px"></div>

Now run the Laravel server using below command:

php artisan serve

In 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.