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.
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
After installation completed, Open your nova service provider in
as a default dashboard for Laravel Nova and edit function cards with this line code:
'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' ]
So your code will be look like this:
After that, you can save the file and see your dashboard should be like this:
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
->model('\App\Models\Sales') // Use Your Model Here
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.
Subscribe to get your daily round-up of top tech stories!