Membuat Grafik Di Laravel

by Admin MFSNovember 01, 20190 Comments
Di sini Cara Kita Aja akan membagikan tutorial membuat grafik atau chart di laravel dengan package dari composer yaitu “ConsoleTVs/Charts”. Library ini support dengan library chart lain seperti chartjs, highcharts, google, material, chartist, fusioncharts, morris, plottablejs, dll.
Ada banyak jenis chart yang dapat Anda buat dengan library tersebut.
  • line chart
  • area chart
  • bar chart
  • pie chart
  • donut chart
  • geo chart
  • gauge chart
  • temp chart
  • percentage chart
  • progressbar chart
  • areaspline chart
  • scatter chart
Dalam contoh ini akan menampilkan chart dari jumlah user yang melakukan regristrasi dalam bulan dan current year.

Ok ayo kita mulai Cara Kita Aja :
  • Install Package : 
composer require consoletvs/charts
  • Setelah selesai instalasi package tambahkan provider dan alias
    config/app.php
'providers' => [
 ....
 ConsoleTVs\Charts\ChartsServiceProvider::class,
],

'aliases' => [
 ....
 'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
]
  • Jalankan command berikut di terminal
php artisan tinker
>>> factory(App\User::class, 20)->create();
  • Tambahakan router berikut
    routes/web.php
Route::get('my-chart', 'ChartController@index');
  • Buat controller baru dengan nama ChartController dan edit sehingga seperti berikut.
    app/Http/Controllers/ChartController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;

class ChartController extends Controller
{

    public function index()
    {
     $users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))->get();
        $chart = Charts::database($users, 'bar', 'highcharts')
         ->title("Monthly new Register Users")
         ->elementLabel("Total Users")
         ->dimensions(1000, 500)
         ->responsive(false)
         ->groupByMonth(date('Y'), true);
        return view('chart',compact('chart'));
    }
}
  • Sekarang buat blade untuk frontend.
    resources/views/chart.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5 Chart example using Charts Package</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    {!! Charts::assets() !!}
</head>
<body>
 <div class="container">
  <h1>Laravel 5 Chart example using Charts Package</h1>
  {!! $chart->render() !!}
 </div>
</body>
</html>

Ok selanjutnya kalian tinggal coba jalankan saja viewnya
Semoga Cara Kita Aja membantu

0 Komentar