Laravel Line Chart using Google Charts API Example

By Hardik Savani November 5, 2023 Category : Laravel Google API

In now-days, Google have several popular API like map, chart, analytics etc. Google charts JS API is also very popular and it is pretty simple to integrate with our application or projects. In this post, i going to give you example of Google line chart, How to user Google line chart in your laravel 5 application.

Google charts js provide several other charts like bar chart, Area chart, Column Chart, Pie Chart, GEO Chart etc. In this post we will use line chart with good graphical way. you can use in your laravel application, you just follow few step, after you can get output as bellow preview.

Preview:

Step 1: Add Table and Data

we require to create new table "visitor" that way we will get data from this table, you can use your own table but this is for example. we have to create migration for visitor table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_visitor_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create visitor table.

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

class CreateVisitorTable extends Migration
{

    public function up()
    {
        Schema::create('visitor', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('click');
            $table->integer('viewer');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::drop("visitor");
    }
}

Ok, now you can add few records like as bellow :

Step 2: Add Route

In this is step we need to add route for generate view. so open your app/Http/routes.php file and add following route.

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

Read Also: How to Add Charts in Laravel using Highcharts?

Step 3: Create Controller

If you haven't HomeController then we should create new controller as HomeController in this path app/Http/Controllers/HomeController.php. Make sure you should have visitor table with some data. this controller will manage data and chart data and view file, so put bellow content in controller file:

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;

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

class HomeController extends Controller
{

    public function googleLineChart()
    {
        $visitor = DB::table('visitor')
                    ->select(
                        DB::raw("year(created_at) as year"),
                        DB::raw("SUM(click) as total_click"),
                        DB::raw("SUM(viewer) as total_viewer")) 
                    ->orderBy("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));
    }

}

Step 4: Create View File

In last step, we have to create view file "google-line-chart.blade.php" for generate view chart, so create google-line-chart file and put bellow code:

resources/view/google-line-chart.blade.php

Read Also: Laravel 10 Google Charts Tutorial Example
<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>
    <div id="linechart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Now you can run and check.

Tags :
Previous

Bootstrap Animated Progress Bar using Bootstrap-progressbar JS
Next

PHP JQuery Select2 Ajax Autocomplete Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares