Laravel Nova Dashboard with Customizable Chart

Most of the time in the part of development in software application, users need to have an admin page to show multiple data and information such as sales performance, operation performance, etc. As one of PHP framework, laravel built an administrative panel called laravel nova. Nova is a beautifully designed administration panel for Laravel. By using this tool, you can easily create and manage your admin panel of your website without having create it from scratch. The cool thing about Nova is it developed using PHP or Vue.js because of Laravel compatibility. Hence it makes your admin panel can be flawless and writing custom components is a cinch.

On this article, I want to share about one package from laravel nova that can provide a nice chart with simple configuration, called Nova ChartJS / Chart JS Integration.

Preparation

I assumed that you already has laravel nova that can be downloaded here, so that we can focus on create our custom dashboard. First, download nova-chartjs component from your bash:

composer require coroowicaksono/chart-js-integration

Basic Usage

After installation completed, Open your nova service provider in

App\Providers\NovaServiceProvider.php

as a default dashboard for Laravel Nova and edit function cards with this line code:

(new StackedChart())
    ->title('Revenue')
    ->series(array([
        'barPercentage' => 0.5,
        'label' => 'Product #1',
        'backgroundColor' => '#ffcc5c',
        'data' => [30, 70, 80],
    ],[
        'barPercentage' => 0.5,
        'label' => 'Product #2',
        'backgroundColor' => '#ff6f69',
        'data' => [40, 62, 79],
    ]))
    ->options([
        'xaxis' => [
            'categories' => [ 'Jan', 'Feb', 'Mar' ]       
        ],
    ])
    ->width('1/3'),

So your code will be look like this:

After that, you can save the file and see your dashboard should be like this:

By using this tool, there are multiple type of chart that we can use, e.g. Bar Chart, Line Chart, Area Chart, Doughnut Chart and Pie Chart.

Use Resource / Model

The next question is, how we get data from our database? With this tool, you can easily re-use your defined laravel model. You only need to add this line to your cards function, and change the model with your defined model

(new StackedChart())
    ->title('Revenue')
    ->model('\App\Models\Sales') // Use Your Model Here
    ->width('2/3'),

Since I already has a defined

sales

model, then my dashboard will be look like this:

Afterwards

At the end, there are a lot of package that you can easily download from laravel nova package. Chart JS Integration is one of many package that can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

For more documentation related this tool, you can take a look at Nova ChartJS documentation.

Source: https://medium.com/@coroo.wicaksono/create-your-own-dashboard-easily-with-laravel-nova-c5fe4554ba17