Laravel – Google Line Chart Example Tutorial From Scratch

Laravel – Google Line Chart Example Tutorial From Scratch

Laravel 7 dynamic google line graph chart example tutorial from scratch. Here, you will learn how to use google line graph chart in laravel app from scratch.

Google Charts provides a perfect way to visualize data on your website. And also you can display dynamic data day wise, month wise, year wise on google line graph chart in laravel.

This tutorial will help you on how to use google line graph chart in laravel. And as well as, how to fetch current year month-wise data and display it on google line graph chart in laravel app.

Laravel Dynamic Google Line Charts Example

Follow the below steps and implement dynamic google line graph chart in laravel app:

  • Step 1: Install Laravel App
  • Step 2: Add Database Details
  • Step 3: Add Route
  • Step 4: Create Controller
  • Step 5: Create Blade File
  • Step 6: Run Development Server

Step 1: Install Laravel App

In this step, you need to run below command to download or install fresh laravel setup into your machine for creating a laravel google line graph chart app. So open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Database Detail

In this step, you need to navigate your laravel dynamic google line graph chart app project root directory. And open .env file. Then add database detail like below:

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 3: Add Route

In this step, navigate to the routes folder and open web.php file. Then add the following route into your web.php file:

Route::get("laravel-google-line-chart", "[email protected]");

Step 4: Create Controller

In this step, open your terminal again and run the following command to create a controller named GoogleLineController.php:

php artisan make:controller GoogleLineController

Then Navigate to app/http/controller folder and open GoogleLineController.php. And add the following code into your GoogleLineController.php file:

<?php
  
namespace App\Http\Controllers;

use App\User;

use Illuminate\Http\Request;

use Redirect,Response;

Use DB;

use Carbon\Carbon;

class GoogleLineController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {

     $data['lineChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"),\DB::raw('max(created_at) as createdAt'))
        ->whereYear('created_at', date('Y'))
        ->groupBy('month_name')
        ->orderBy('createdAt')
        ->get();

        return view('google-line-chart', $data);
    }

}

Step 5: Create Blade File

In this step, navigate to /resources/views/ folder and create one blade view file name google-line-chart.blade.php. And add the following code into your google-line-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel Google Line Graph Chart - Tutsmake.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>

    <div class="container p-5">
        <h5>Laravel Google Line Chart | Tutsmake</h5>

        <div id="google-line-chart" style="width: 900px; height: 500px"></div>

    </div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Month Name', 'Register Users Count'],

                @php
                foreach($lineChart as $d) {
                    echo "['".$d->month_name."', ".$d->count."],";
                }
                @endphp
        ]);

        var options = {
          title: 'Register Users Month Wise',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

          var chart = new google.visualization.LineChart(document.getElementById('google-line-chart'));

          chart.draw(data, options);
        }
    </script>
</body>
</html> 

Step 6: Run Development Server

Finally, you need to run the following PHP artisan serve command to start your laravel dynamic google line chart app:

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, you are ready to run laravel dynamic google line chart app. So open your browser and hit the following URL into your browser:

http://localhost:8000/laravel-google-line-chart

Live Demo

You can see a live demo of laravel google line chart here:

Conclusion

In this laravel google line chart tutorial from scratch, you have learned how to implement dynamic google line chart in laravel app.

Recommended Laravel Tutorial

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *