Laravel 11 ChartJS Line Chart Example

Websolutionstuff | May-10-2024 | Categories : Laravel jQuery

Hello developer! In this article, we'll see how to create a dynamic line chart in laravel 11 using chart js. You can easily create a line chart using ChartJS jQuery. Chart.js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter.

ChartJS is a Simple yet flexible JavaScript charting library for the modern web. Also, you can use with npm and CDN.

Laravel 11 ChartJS Line Chart

Laravel 11 ChartJS Line Chart

 

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-chart-example

 

Step 2: Define a Route

Now, we'll define routes into the web.php file

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ChartJSController;
  
Route::get('chart', [ChartJSController::class, 'index']);
 
Step 3: Create a Controller

Next, we'll create a ChartJSController.php using the following command and define the function.

app/Http/Controllers/ChartJSController.php

<?php
  
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Illuminate\View\View;
use App\Models\User;
use DB;
    
class ChartJSController extends Controller
{
    /**
     * Write code on Method
     *
     * @return View
     */
    public function index(): View
    {
        $users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(DB::raw("Month(created_at)"))
                    ->pluck('count', 'month_name');
 
        $labels = $users->keys();
        $data = $users->values();
              
        return view('chart', compact('labels', 'data'));
    }
}
 
Step 4: Create Blade File

Then, we'll create a blade file and also use chartjs line chart.

resources/views/chart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 ChartJS Line Chart Example - Techsolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
    
<body>
    <div class="container">
        <div class="card mt-5">
            <h3 class="card-header p-3">Laravel 11 ChartJS Chart Example - ItSolutionStuff.com</h3>
            <div class="card-body">
                <canvas id="myChart" height="120px"></canvas>
            </div>
        </div>
    </div>
</body>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
<script type="text/javascript">
  
      var labels =  {{ Js::from($labels) }};
      var users =  {{ Js::from($data) }};
  
      const data = {
        labels: labels,
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: users,
        }]
      };
  
      const config = {
        type: 'line',
        data: data,
        options: {}
      };
  
      const myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
  
</script>
</html>
 
Step 5: Create Dummy Records

Next, we'll create dummy records for testing purposes using the tinker.

php artisan tinker

User::factory()->count(50)->create()

 

Step 6: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve

Output:

Laravel 11 ChartJS Line Chart

 


You might also like:

Recommended Post
Featured Post
How To Get env Variable In Controller Or Blade File
How To Get env Variable In Con...

In this tutorial, I will give you information on how to get the .env variable in the controller or file. Many times we n...

Read More

Jul-26-2020

How To Get Data Between Two Dates In Laravel 9
How To Get Data Between Two Da...

In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...

Read More

Dec-19-2022

How to Integrate Razorpay Payment Gateway in Laravel
How to Integrate Razorpay Paym...

In this article, we will see the most important and exciting toping about how to integrate razorpay payment gateway in l...

Read More

Jan-06-2021

How To Get Last 30 Days Record In Laravel 8
How To Get Last 30 Days Record...

in this tutorial, we see how to get last 30 days record in laravel 8. You can simply get the last 30 days reco...

Read More

Feb-02-2022