kamandlou/laravel-chart

A package for create charts in laravel

v1.2 2022-02-23 11:05 UTC

This package is auto-updated.

Last update: 2024-05-11 16:29:23 UTC


README

Laravel chart is a customizable and flexible package for creating chart in Laravel.

Installation

  1. Install the package and its dependencies using Composer:

    composer require kamandlou/laravel-chart

  2. Publish package files using Artisan command:

    php artisan chart:install

Usage Guide

Add scripts to your page:

  • <script src="{{ asset('js/chart.js/dist/chart.min.js') }}"></script>
  • <script>
      {!! $chartScript !!}
    </script>
    

Create a canvas in your page:

  • <canvas id="myChart"></canvas>

You have two way to use

  return Chart::chart('myChart', [
     'type' => 'bar',
     'data' => [
         'labels' => ['Red', 'Blue', 'Yellow'],
         'datasets' => [
             [
                 'label' => '# of Votes',
                 'data' => [12, 19, 3],
                 'backgroundColor' => [
                     'rgba(255, 99, 132, 0.2)',
                     'rgba(54, 162, 235, 0.2)',
                     'rgba(255, 206, 86, 0.2)',
                 ],
                 'borderColor' => [
                     'rgba(255, 99, 132, 1)',
                     'rgba(54, 162, 235, 1)',
                     'rgba(255, 206, 86, 1)',
                 ],
                 'borderWidth' => 1
             ]
         ]
     ],
     'options' => [
         'scales' => [
             'y' => [
                 'beginAtZero' => true
             ]
         ]
     ]
 ])->render('index');

Or

return Chart::id('myChart')
        ->type('bar')
        ->labels(['Red', 'Blue', 'Yellow'])
        ->datasets([
            [
                'label' => '# of Votes',
                'data' => [12, 19, 3],
                'backgroundColor' => [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                ],
                'borderColor' => [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                ],
                'borderWidth' => 1
            ]
        ])
        ->options([
            'scales' => [
                'y' => [
                    'beginAtZero' => true
                ]
            ]
        ])
        ->render('index');

for see more option go to chart.js documention

Chart.js Document