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 . 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. laravel nova 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 , so that we can focus on create our custom dashboard. First, download component from your bash: here nova-chartjs composer require coroowicaksono/chart-js-integration Basic Usage After installation completed, Open your nova service provider in as a default dashboard for Laravel Nova and edit function cards with this line code: App\Providers\NovaServiceProvider.php ( StackedChart())
    ->title( )
    ->series( ([ => , => , => , => [ , , ],
    ],[ => , => , => , => [ , , ],
    ]))
    ->options([ => [ => [ , , ]       
        ],
    ])
    ->width( ), new 'Revenue' 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 'xaxis' 'categories' 'Jan' 'Feb' 'Mar' '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 , there are multiple type of chart that we can use, e.g. , , , and . this tool Bar Chart Line Chart Area Chart Doughnut Chart 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 ( StackedChart())
    ->title( )
    ->model( ) ->width( ), new 'Revenue' '\App\Models\Sales' // Use Your Model Here '2/3' Since I already has a defined model, then my dashboard will be look like this: sales Afterwards At the end, there are a lot of package that you can easily download from . 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. laravel nova package 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

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Laravel Nova Dashboard with Customizable Chart

Too Long; Didn't Read

Kuncoro Wicaksono

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Laravel Nova Dashboard with Customizable Chart

Too Long; Didn't Read

Kuncoro Wicaksono

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES