Dynamic Google Line Charts In Laravel 10

Dynamic Google Line Charts In Laravel 10

If you want to visualize your data by creating a Google Line Chart in your Laravel 10 application using Google’s ChartJS library, this tutorial is tailored to guide you through the process. In this tutorial, you will learn how to integrate the Google ChartJS library into your Laravel app and create a line graph chart.

How to Create Dynamic Google Line Charts In Laravel 10

By following the steps outlined in this tutorial, you will be able to integrate Google’s ChartJS library into your Laravel 10 application and create a line graph chart to visualize your data.

  • Step 1: Create New Laravel 10 Project
  • Step 2: Setup Database with Laravel App
  • Step 3: Add Routes
  • Step 4: Create a Controller
  • Step 5: Create Blade File
  • Step 6: Run Development Server

Step 1: Create New Laravel 10 Project

Firstly, Open your terminal or command prompt.

Then you need to execute following command into it to download or install fresh laravel setup in your server:

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

Step 2: Setup Database with Laravel App

Once you have installed Laravel app on your server. Then you have to setup a database with your laravel app.

And then visit to the root directory of Laravel app. And open .env file. Then add database detail like the 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 Routes

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

use App\Http\Controllers\GoogleLineController;
Route::get('laravel-google-line-chart', [GoogleLineController::class, 'index']);

Step 4: Create Controller

In this step, open the terminal and execute 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 Illuminate\Http\Request;

Use DB;

use App\Models\User;

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 10 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 10 Google Line Chart | Tutsmake.com</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

Now, Execute PHP artisan serve command on terminal to start development server for Laravel 10 dynamic google line chart app:

php artisan serve

Then, open your browser and hit the following URL into your browser:

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

Live Demo

Checkout Live demo:

Conclusion

By following this tutorial, you will be able to integrate Google’s ChartJS library into your Laravel 10 application and create a line graph chart to visualize your data. Modify the data and options in the script block to fit your specific needs and display your own dataset. Refer to the Google ChartJS documentation for more details on available options and advanced chart configurations.

Recommended Laravel Posts

AuthorAdmin

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, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL 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 *