12. Realtime Dashboard LiveView

Welcome to this hands-on tutorial where we dive into building a fully functional real-time dashboard with Phoenix LiveView and Apex Charts. If you're looking to enhance your web application with dynamic, auto-updating visualizations, this is the perfect guide for you.

In this tutorial, we'll walk through the process of setting up a real-time dashboard that displays three essential charts:

1. Sales Over Time (line chart) — showcasing how different beer types perform over the years.
2. Distribution by Beer Type (pie chart) — giving you a clear visual of how each beer contributes to total sales.
3. Top Selling Cities (bar chart) — revealing the cities where your products are most popular.

You'll learn how to:

• Create and configure each chart to dynamically display data from your database.
• Set up Phoenix PubSub to broadcast real-time updates when data changes.
• Format data for use in various chart types, ensuring everything is displayed correctly.
• Use Phoenix LiveView to efficiently handle updates and maintain a seamless user experience.

By the end, you'll see how changes in sales data are instantly reflected on the dashboard without needing a page refresh. This tutorial covers everything from setting up the backend with PostgreSQL to wiring up the front end with chart components. Whether you're new to Phoenix LiveView or want to sharpen your skills with real-time features, this video will provide you with practical insights to level up your app.