https://github.com/laravel-admin-extensions/chartjs

Use Chartjs in laravel-admin
https://github.com/laravel-admin-extensions/chartjs

chartjs laravel-admin

Last synced: about 1 month ago
JSON representation

Use Chartjs in laravel-admin

• Host: GitHub
• URL: https://github.com/laravel-admin-extensions/chartjs
• Owner: laravel-admin-extensions
• License: mit
• Created: 2018-09-14T07:53:13.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-23T02:16:41.000Z (almost 6 years ago)
• Last Synced: 2024-11-02T19:33:44.669Z (about 1 month ago)
• Topics: chartjs, laravel-admin
• Language: PHP
• Homepage:
• Size: 68.4 KB
• Stars: 102
• Watchers: 4
• Forks: 37
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-laravel-admin - chartjs - Chartjs 图表 (扩展包 / 视图类扩展包)

README

        
Use Chartjs in laravel-admin

======

[DEMO](http://demo.laravel-admin.org/chartjs)

Login using `admin/admin`

## Screenshot

![qq20180917-132122](https://user-images.githubusercontent.com/1479100/45607189-2b018b80-ba7d-11e8-845e-d7ab810bc07f.png)

## Installation

```bash

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.

```php

    '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/chartjs.blade.php`, and add following codes:

```html

$(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

                    }

                }]

            }

        }

    });

});

```

Then show it on the page

```php

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](http://www.chartjs.org/) of chartjs.

## Donate

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

[![PayPal Me](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/zousong)

![-1](https://cloud.githubusercontent.com/assets/1479100/23287423/45c68202-fa78-11e6-8125-3e365101a313.jpg)

License

------------

Licensed under [The MIT License (MIT)](LICENSE).