Dashboard Charts like Google Analytics

Filament 4
Also available in Filament 3 version

A demonstration of creating dashboard widgets that mimic Google Analytics behavior.

vRkYt9XdnNGCaKy5LjikGyadlOI3iq-metaQ2hvb3NlIERhdGUgJiBTZWUgQXZhaWxhYmxlIFRpbWVzbG90cyAoNSkucG5n-

Get the Source Code:

How it works

The main logic lives in two charts that we have created - VisitorsPerCountry and VisitorsChart:

  • Visitors chart simply takes the data and filters it by date range, then counts the visitors per day and returns the array of values.
  • Visitors chart also uses Filament recommended package flowframe/laravel-trend that's documented here
  • Visitors per country uses a custom widget with a custom display inside
    • This widget uses a custom Livewire component to display a chart that has real-time polling
    • Inside we also have a table with the data that's updated in real-time

All of this includes a clever usage of Filament charts/widgets and custom Livewire components. So here's how that looks in code:

Our first chart - VisitorsChart, which displays historical data:

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 152 Premium Examples for $99