📊 Data Visualization Dashboard

Real-time charts with Opal + Chart.js + Stimulus

-
Loading...

Users by Company

Pie Chart

Users by City

Doughnut Chart

Weekly Activity

Bar Chart

Interactive Chart

Line Chart

💡 About This Dashboard

Real-time Data

Charts are populated with data from JSONPlaceholder API, demonstrating how to integrate external data sources.

Interactive Controls

The interactive chart shows how to dynamically update Chart.js visualizations using Stimulus actions.

Multiple Chart Types

Demonstrates pie, doughnut, bar, and line charts - all powered by Chart.js and controlled by Opal.

Event-Driven Updates

Charts listen for custom events and update automatically when new data arrives.