Jika Anda perlu menambahkan beberapa chart ke project Anda maka saya akan membantu Anda cara menambahkan ajax chart dengan laravel 6 menggunakan paket consoletvs/chart. di sini saya akan memberi Anda contoh membuat grafik ajax dengan consoletvs/chart di aplikasi laravel 6. consoletvs/chart menyediakan chart tinggi, chart , chart Fusion, chart , Frappe, dan chart ajax c3 dengan laravel 6.

Saya akan memberi Anda langkah demi langkah bagan ajax sederhana menggunakan consoletvs/chart di laravel 6. consoletvs/charts menyediakan cara untuk menggambar bagan menggunakan metode ajax. kami mungkin kadang-kadang perlu mengubah chart pada tahun atau nilai yang dipilih, pada saat itu tidak baik jika Anda me-refresh halaman dan menampilkan grafik baru, Anda harus melakukannya menggunakan jquery ajax. Menggunakan metode ajax Anda dapat dengan mudah membuat bagan sederhana tanpa memuat ulang halaman.

Jadi, mari ikuti tutorial di bawah ini dan Anda akan mendapatkan bagan ajax sederhana dengan laravel 6. Anda juga dapat melihat cuplikan layar demo, Anda dapat memahami:

Step 1: Instal Laravel 6

Pertama-tama, kita perlu mendapatkan aplikasi versi laravel 6 baru menggunakan perintah di bawah karena kita akan dari awal, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah di bawah ini:

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

Step 2: Install consoletvs/charts Package

Pada langkah ini kita perlu menginstal consoletvs/chart melalui manajer paket Composer, jadi satu terminal Anda dan jalankan perintah di bawah ini:

composer require consoletvs/charts

Step 3: Create Route

Pada langkah ini kita perlu membuat route untuk tampilan tampilan dan metode ajax. jadi buka file "route/web.php" Anda dan tambahkan route berikut.

routes/web.php

Route::get('chart-line', 'ChartController@chartLine');
Route::get('chart-line-ajax', 'ChartController@chartLineAjax');

Step 4: Create Chart Class

Di sini, kita perlu membuat class chart menggunakan perintah consoletvs/charts, jadi mari kita buat seperti di bawah ini:

php artisan make:chart UserLineChart Chartjs

Sekarang Anda dapat melihat ada pada file UserLineChart.php, seperti di bawah ini:

app/Charts/UserLineChart.php

<?php
  
namespace App\Charts;
  
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
  
class UserLineChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

Step 5:Create Controller:

Di sini, kita akan membuat controller baru sebagai ChartController. jadi mari kita tambahkan kode di bawah ini pada file pengontrol itu.

app/Http/Controllers/ChartController.php

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\User;
use App\Charts\UserLineChart;
   
class ChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function chartLine()
    {
        $api = url('/chart-line-ajax');
   
        $chart = new UserLineChart;
        $chart->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])->load($api);
          
        return view('chartLine', compact('chart'));
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function chartLineAjax(Request $request)
    {
        $year = $request->has('year') ? $request->year : date('Y');
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', $year)
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
  
        $chart = new UserLineChart;
  
        $chart->dataset('New User Register Chart', 'line', $users)->options([
                    'fill' => 'true',
                    'borderColor' => '#51C1C0'
                ]);
  
        return $chart->api();
    }
}

Step 6: Create Blade File:

di sini, kita perlu membuat file blade dan dalam file blade ini kita menggunakan grafik js dan menggunakan kode mereka.

resources/views/chartLine.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Laravel Ajax ConsoleTvs Charts Tutorial - Medikre.com</title>
    </head>
    <body>
  
        <h1>Laravel Ajax ConsoleTvs Charts Tutorial - Medikre.com</h1>
  
        <select class="sel" name="year">
            <option value="2019">Year 2019</option>
            <option value="2018">Year 2018</option>
            <option value="2017">Year 2017</option>
        </select>
  
        <div style="width: 80%;margin: 0 auto;">
            {!! $chart->container() !!}
        </div>
          
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
  
        {!! $chart->script() !!}
  
        <script type="text/javascript">
            var original_api_url = {{ $chart->id }}_api_url;
            $(".sel").change(function(){
                var year = $(this).val();
                {{ $chart->id }}_refresh(original_api_url + "?year="+year);
            });
        </script>
    </body>
</html>

Step 7: Create Dummy Records:

Di sini, kita perlu menambahkan beberapa data dummy di tabel users sebagai kebijakan bulanan dan menambahkan data selama dua tahun. Anda harus membuat userspada setiap bulan dengan tanggal dibuat seperti di bawah ini:

Ok, sekarang Anda dapat menjalankan dan memeriksa grafik.

Saya harap ini dapat membantu Anda ...