Membuat Chart Di Laravel Menggunakan Package Larapex Charts Mudah Dan Simple

Membuat Chart Di Laravel Menggunakan Package Larapex Charts Mudah Dan Simple

Pada Aplikasi sering sekali kita membutuhkan chart yang sangat berfungsi untuk memudahkan user dalam melakukan analisis data pada contoh kali ini kita akan membahas bagaimana menampilkan chart di laravel menggunakan package dari larapex Charts.

Kengapa Menggunakan Larapex Charts ?

  1. mudah dalam instalasi
  2. dokumentasi yang lengkap
  3. terdapat cdn sangat cocok digunakan di production
  4. Gratis
  5. Terdapat banyak pilihan jenis chart
  6. dibuat khusus untuk laravel

Instalasi Larapex Charts

untuk melakukan instalasi larapex charts pada project laravel cukup mudah sbb

composer require arielmejiadev/larapex-charts

Lalu publish confignya dengan cara sbb

php artisan vendor:publish --tag=larapex-charts-config

Dengan menjalankan dua tahap diatas maka larapex sudah berhasil di instal di project anda mudah bukan ? hehehe

Contoh Penggunaan Larapex Charts

kali ini kita akan mencoba menampilkan chart dengan menggunakan larapex charts pada contoh kali ini saya akan menampilkan chart dari data pengunjung website di salah satu blog

coding di controller

user_types = Analytics::fetchUserTypes(Period::days(7));

        $chart_user_types = LarapexChart::barChart()
            ->setTitle('New Visitor Vs Returning Visitor')
            ->setSubTitle('7 Hari Terakhir')
            ->addData('New Visitor', [$user_types[0]['sessions']])
            ->addData('Returning Visitor', [$user_types[1]['sessions']])
            ->setXAxis(['New Visitor', 'Returning Visitor']);

return view('dashboard', compact(
            'chart_user_types' ));

Coding Di Views

<x-app-layout>
<div>
         <div class="container px-6 mx-auto">
                  <div class="p-6 m-10 bg-white rounded shadow ">
                            {!! $chart_user_types->container() !!}
                   </div>
         </div>
</div>
  <script src="{{ LarapexChart::cdn() }}"></script>
       {{ $chart_user_types->script() }}
</x-app-layout>

Untuk Output Dari Views Diatas Adalah sbb

Jika anda ingin menambahkan lebih dari satu charts anda bisa lakukan sbb :

di controller

        $chart_pageview = LarapexChart::pieChart()
            ->setTitle('Total Halaman Di Lihat')
            ->setSubtitle('Hari ini Vs Kemarin')
            ->addData([
                $total_visitors[0]['pageViews'],
                $total_visitors[1]['pageViews']
            ])
            ->setLabels(['Kemarin', 'Hari Ini']);

        $chart_visitor = LarapexChart::pieChart()
            ->setTitle('Total Pengunjung')
            ->setSubtitle('Hari ini Vs Kemarin')
            ->addData([
                $total_visitors[0]['visitors'],
                $total_visitors[1]['visitors']
            ])
            ->setLabels(['Kemarin', 'Hari Ini']);

  return view('dashboard', compact(
            'chart_pageview',
            'chart_visitor',
        ));

di views anda dapat lakukan sbb

<x-app-layout>
<div>
  <div class="container px-6 mx-auto flex">

                        <div class="p-6 m-10 bg-white rounded shadow lg:w-1/2">
                            {!! $chart_pageview->container() !!}
                        </div>
                        <div class="p-6 m-10 bg-white rounded shadow lg:w-1/2">
                            {!! $chart_visitor->container() !!}
                        </div>

      </div>
</div>

<script src="{{ LarapexChart::cdn() }}"></script>
       {{ $chart_user_types->script() }}
</x-app-layout>

maka output dari view diatas adalah sbb

bagi anda yang ingin menggunakan cdn anda bisa menggunakan link dibawah ini

   <script src="https://cdn.jsdelivr.net/npm/apexcharts">
   </script>

Kesimpulan

Demikian cara membuat chart di project laravel kita menggunakan package larapex chart sangat mudah bukan ? untuk mempelajari lebih lanjut mengenai larapex anda bisa membaca dokumentasinya dengan cara klik disini

Semoga Bermanfaat,

Terima Kasih,

Adinata

Link Terkait

Twitter Creator Larapex klik disini

Github Larapex Chart Klik disini

Dokumentasi Lengkap larapex Chart Klik Disini

Belikan Saya Kopi

Print Friendly, PDF & Email
ADINATA

Recent Comments

    Instagram Saya

    Invalid user id

    My Favorite Quote

    Work Hard,

    Have Fun,

    Make History,

    Jeff Bezos