Use Chartjs in laravel-admin
Switch branches/tags
Nothing to show
Clone or download
Latest commit 447b870 Sep 17, 2018
Permalink
Failed to load latest commit information.
resources/assets first commit Sep 16, 2018
src first commit Sep 16, 2018
.gitignore Initial commit Sep 14, 2018
LICENSE Initial commit Sep 14, 2018
README.md Update README.md Sep 17, 2018
composer.json first commit Sep 16, 2018

README.md

Use Chartjs in laravel-admin

DEMO

Login using admin/admin

Screenshot

qq20180917-132122

Installation

composer require laravel-admin-ext/chartjs

php artisan vendor:publish --tag=laravel-admin-chartjs

Configuration

Open config/admin.php, add configurations that belong to this extension at extensions section.


    'extensions' => [

        'chartjs' => [
        
            // Set to `false` if you want to disable this extension
            'enable' => true,
        ]
    ]

Usage

Create a view in views directory like resources/views/admin/chart.blade.php, and add following codes:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
$(function () {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
});
</script>

Then show it on the page

class ChartjsController extends Controller
{
    public function index(Content $content)
    {
        return $content
            ->header('Chartjs')
            ->body(new Box('Bar chart', view('admin.chartjs')));
    }
}

For more usage, please refer to the official documentation of chartjs.

Donate

Help keeping the project development going, by donating a little. Thanks in advance.

PayPal Me

-1

License

Licensed under The MIT License (MIT).