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.
composer require coroowicaksono/chart-js-integration
After installation completed, Open your nova service provider in
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:
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
model, then my dashboard will be look like this:
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.