Live Data Widgets
This section showcases live data widgets with real-time data and interactive elements.
Live Data Widgets
Revenue Analytics
Interactive revenue tracking with period
selection
Task Completion
45%
check2,847 tasks completed
6,324 total tasks assigned
question_mark
Network Traffic Monitor
Network Traffic
1.42 TB/s
INBOUND:
621.5 GB/s
OUTBOUND:
798.3 GB/s
System Performance
bolt Live68%
CPU
54%
Memory
82%
Network
group
+12%
Active Users
2,847
cloud
98%
System Uptime
99.9%
speed
Fast
Avg Response
1.2s
database
78%
Storage Used
156 GB
infoLoading Data into Widgets
Live Data widgets can dynamically load and update content using various methods:
- AJAX/Fetch API: Load data asynchronously from your backend API endpoints
- WebSockets: Real-time updates for live dashboards and monitoring
- Laravel Livewire: Reactive components with automatic updates
- Polling: Periodic data refresh using setInterval or similar timers
- Server-Sent Events (SSE): One-way server push for continuous updates
Total Revenue
$2.85M
+12.5% question_markTotal Expenses
$1.42M
+8.2% question_markNet Profit
$1.43M
+15.3% question_markCash Balance
$847K
+5.7% question_markLoading State Example
This widget demonstrates a permanent loading state - useful for showing users that data is being fetched:
Live Data Widget
Loading...
Loading...
HTML Structure:
<div class="card">
<div class="card-body d-flex flex-column align-items-center justify-content-center" style="min-height: 200px;">
<div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
<p class="text-muted mb-0">Loading...</p>
</div>
</div>JavaScript Example:
// Fetch data and replace loading state
fetch('/api/data')
.then(response => response.json())
.then(data => {
// Replace loading state with actual widget content
document.querySelector('.card-body').innerHTML = `
<h5>${data.title}</h5>
<p>${data.content}</p>
`;
})
.catch(error => {
console.error('Error loading data:', error);
});Live Ticker Component
Scrolling ticker for displaying real-time data feeds like system logs, crypto prices, or news updates:
System Ticker Demo
Crypto Ticker Demo
HTML Structure - System Ticker:
<div class="ticker-wrap ticker-system" id="system-ticker">
<div class="ticker-move">
<!-- Ticker items will be dynamically inserted here -->
</div>
</div>HTML Structure - Crypto Ticker:
<div class="ticker-wrap ticker-crypto" id="crypto-ticker">
<div class="ticker-move">
<!-- Ticker items will be dynamically inserted here -->
</div>
</div>JavaScript - System Ticker:
// Initialize System Ticker (API logs/events)
function initSystemTicker() {
if (window.SystemTicker) {
const systemTicker = new window.SystemTicker('#system-ticker', {
refreshInterval: 30000 // Refresh every 30 seconds
});
} else {
setTimeout(initSystemTicker, 100); // Retry if not loaded
}
}
initSystemTicker();JavaScript - Crypto Ticker:
// Initialize Crypto Ticker (fetches live data from CoinGecko API)
function initCryptoTicker() {
if (window.CryptoTicker) {
const cryptoTicker = new window.CryptoTicker('#crypto-ticker', {
refreshInterval: 60000 // Refresh every 60 seconds
});
} else {
setTimeout(initCryptoTicker, 100); // Retry if not loaded
}
}
initCryptoTicker();lightbulbTicker Features:
- System Ticker: Displays mock API call logs with methods, endpoints, status codes, and response times
- Crypto Ticker: Fetches real cryptocurrency data from CoinGecko API showing prices and 24h changes
- Auto-refresh: Both tickers automatically update with new data at configurable intervals
- Pause on hover: Users can hover to pause the animation and read specific items
- Customizable: Create your own ticker by extending the base Ticker class in admin-static.js