Skip to main content

Dashboard Widgets: Charts and Tables

Premium
5 min read

In this lesson, let's change our dashboard to something more interesting than static placeholders.

Typically, we have charts and numbers on the dashboard of such projects. So, we can calculate something like these:

  • Tasks completed vs in progress
  • Tasks due today
  • Tasks created this week, grouped by day

Let's show them all on the dashboard.


Change Factory and Re-Seed Data

To have some data to show, we need to randomize a few things and seed more tasks.

database/factories/TaskFactory.php:

return [
'name' => fake()->name(),
'is_completed' => fake()->boolean(),
'due_date' => fake()->dateTimeBetween('now', '+1 month'),
'created_at' => fake()->dateTimeBetween(now()->startOfWeek(), now()->endOfWeek()),
];

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

RA
Richard A. Hoyle ✓ Link copied!

Any chance of you helping us get the charts to actually work.?

I have two 2 due dates set for today; but I am not getting any on the Dashboard.

M
Modestas ✓ Link copied!

Could you add more details on what actually isn't working? It is working perfectly fine on my end :)

RA
Richard A. Hoyle ✓ Link copied!

Every thing is working grate up to this point On the task/index.tsx page the file is visible as well as the Categories the Status is set for in Progress and the Due Date is set for todays date.

M
Modestas ✓ Link copied!

Check the database to see if they are set to in progress. Check that your database correctly filters the records based on the query.

Really hard to say what exactly is wrong here without seeing what was done.

I have just tested this - it does seem to work and correctly filter the due date results

RA
Richard A. Hoyle ✓ Link copied!

the Progress Overview pie chart is working grate I went through and changed quite a few of the states to completed and the pie chart has changed as well

RA
Richard A. Hoyle ✓ Link copied!

the program has the date as 3/21/2025 however the database has it as 3/22/2025 What’s up with this and how do I fix it?

this is both with the edit.tsx and the create.tsx files

If I chouse the date of 3/20/2025 then it shows up in the dashboard and the database has the date of 3/21/2025 but the Tasks index.tsx page has the date of the 3/20/2025 Not the 21 how can we fix this?

PK
Povilas Korop ✓ Link copied!

Sorry but we can't "blindly" debug it for you.

RA
Richard A. Hoyle ✓ Link copied!

I can zip it up and send it to you just give me a email and I will send it to you. My Email is rhoyle@comcast.net

PK
Povilas Korop ✓ Link copied!

Sorry Richard but we're not going to spend time comparing your code manually when we provide the repository that you can copy paste in FULL and see if it works.

If we debug for everyone what happens on their local environment, we wouldn't have time to actually publish anything.

AA
Ahmad Alharbi ✓ Link copied!

Thanks for the course , I have a question how to make the dashboard RTL ? sorry for the silly question but realy tried and did not make it , thank you in advance

M
Modestas ✓ Link copied!

Hello, I hqve never worked with RTL systems, so I am not sure how to help here

RS
Riley Shannon ✓ Link copied!

Is Tailwind V4 still not supported? It appears that they have added it to the docs as a legacy just requiring Vue > 3.3. It appears they are using TW v4 in the docs with the @layer directive?

https://www.shadcn-vue.com/docs/charts.html

M
Modestas ✓ Link copied!

honestly - not sure

CB
Carlos Bicho ✓ Link copied!

Clear, concise, and practical course that are highly useful for developers looking to enhance their Laravel skills. Their tutorials focus on real-world applications, making it easy to apply the concepts directly to projects.

F
FadiAbadir ✓ Link copied!

why Inertia vue resolves the page twice at first load

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.