Skip to main content

​
Overview

The Analytics Dashboard is the command center of your Finanzapp experience. With interactive charts, customizable widgets, and comprehensive financial insights, you’ll have a complete view of your financial health at your fingertips.

​
Dashboard Features

Interactive Charts

Dynamic visualizations powered by Chart.js with hover details and animations

Customizable Widgets

Drag-and-drop widgets to create your personalized dashboard layout

Real-Time Updates

Live data updates as you record transactions and changes

Mobile Responsive

Full-featured dashboard optimized for all device sizes

​
Main Dashboard View

Your dashboard provides an at-a-glance overview of your complete financial picture: 
// Dashboard preview from landing_page.js
function initHeroChart() {
  const ctx = document.getElementById("mainChart");
  
  let chart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
      datasets: [
        {
          label: 'Ingresos',
          data: [1500, 1800, 1600, 2200, 1900, 2540],
          borderColor: '#0066ff',
          backgroundColor: 'rgba(0, 102, 255, 0.1)',
          tension: 0.4,
          fill: true
        },
        {
          label: 'Gastos',
          data: [1200, 1400, 1300, 1800, 1600, 1825],
          borderColor: '#ff3366',
          backgroundColor: 'rgba(255, 51, 102, 0.1)',
          tension: 0.4,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          mode: 'index',
          intersect: false
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            display: true,
            color: 'rgba(0, 0, 0, 0.05)'
          },
          ticks: {
            callback: value => value + '€'
          }
        },
        x: {
          grid: {
            display: false
          }
        }
      }
    }
  });
}
Charts automatically update when you add new transactions or modify existing data. No manual refresh required!

​
Key Stat Cards

The dashboard displays critical financial metrics in easy-to-read stat cards:

​
Monthly Income

Displays your total income for the current period:
<div class="stat-card">
  <div class="stat-card-icon blue">
    <i class="fas fa-arrow-up"></i>
  </div>
  <div class="stat-card-info">
    <div class="stat-card-label">Ingresos</div>
    <div class="stat-card-value">2.540€</div>
  </div>
</div>
Features:
  • Blue upward arrow for income
  • Monthly total with comparison to previous month
  • Percentage change indicator

​
Chart Types

Income vs. Expenses Over TimeTrack trends with smooth line charts showing:
  • Monthly income progression
  • Spending patterns
  • Net income trends
  • Comparative analysis
Hover over any data point to see exact values and dates. Click the legend to show/hide specific datasets.
Category BreakdownVisualize spending by category:
  • Housing: 35%
  • Food: 20%
  • Transportation: 15%
  • Entertainment: 10%
  • Savings: 20%
Interactive segments that expand on click for detailed breakdowns.
Category ComparisonCompare spending across categories with vertical or horizontal bar charts. Perfect for:
  • Budget vs. actual spending
  • Month-over-month comparisons
  • Goal progress tracking
Portfolio AllocationSimilar to pie charts but with a center area for displaying:
  • Total portfolio value
  • Main metric summary
  • Percentage of largest holding

​
Customizable Dashboard

1

Enter Edit Mode

Click the “Customize Dashboard” button in the top right corner
2

Drag & Drop Widgets

Rearrange widgets by dragging them to your preferred positions
3

Add/Remove Widgets

Click the ”+” button to add new widgets or ”×” to remove unwanted ones
4

Configure Widgets

Click the gear icon on any widget to configure its settings and data source
5

Save Layout

Click “Save” to preserve your custom dashboard configuration
Your dashboard configuration is saved to your account and syncs across all your devices.

​
Available Widgets

Income/Expense

Compare income vs. expenses with trend indicators

Savings Progress

Track progress toward savings goals

Budget Status

Monitor budget adherence by category

Investments

View investment portfolio performance

Crypto Holdings

Display cryptocurrency values

Net Worth

Show total net worth over time

Recent Transactions

List recent financial activity

Category Spending

Pie chart of spending by category

Goal Tracker

Visual progress for all active goals

​
Time Period Selection

Analyze your finances over different timeframes:
Default view showing the current calendar month’s activity, perfect for tracking against monthly budgets.

​
Filtering & Segmentation

Drill down into your data with powerful filtering: 
// Filter functionality
const filterData = (category, dateRange) => {
  const filteredTransactions = transactions.filter(t => {
    const matchesCategory = !category || t.category === category;
    const matchesDate = isInDateRange(t.date, dateRange);
    return matchesCategory && matchesDate;
  });
  
  updateCharts(filteredTransactions);
};
Filter by:
  • Category (Food, Housing, Entertainment, etc.)
  • Account (Checking, Savings, Credit Card)
  • Type (Income, Expense, Transfer)
  • Tag (Recurring, One-time, Business)
  • Amount range (€0-€100, €100-€500, etc.)

​
Automated Reports

Finanzapp generates comprehensive financial reports automatically:
Automatically generated at month-end:
  • Total income and expenses
  • Category breakdowns
  • Budget performance
  • Savings rate
  • Month-over-month comparison
Monthly summaries can be emailed to you automatically using the EmailJS integration.
Every 3 months, receive:
  • Quarterly financial performance
  • Goal progress updates
  • Investment returns
  • Spending trend analysis
  • Recommendations for next quarter
Comprehensive year-end report including:
  • Full year income and expenses
  • Net worth change
  • Investment performance
  • Goal achievements
  • Tax-related summaries
  • Year-over-year comparisons

​
Export & Sharing

PDF Export

Professional formatted reports with charts and tables

CSV Export

Raw data for analysis in Excel or Google Sheets

Excel Workbook

Multi-sheet workbook with formatted tables and formulas

Image Export

Save individual charts as PNG images

Email Report

Send reports directly via email

Print View

Print-optimized layout for physical reports

​
Mobile Dashboard

The analytics dashboard is fully responsive with mobile-specific optimizations: 
/* Responsive dashboard layout */
.dashboard-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }
  
  .dashboard-chart {
    height: 250px; /* Optimized for mobile */
  }
}
Mobile features:
  • Swipe between widget pages
  • Touch-friendly chart interactions
  • Simplified view for smaller screens
  • Quick action buttons
On mobile, tap the hamburger menu to access the widget selector and customization options.

​
Floating Quick Actions

The dashboard includes animated floating elements for quick access: 
<!-- Floating action elements from index.php -->
<div class="floating-elements">
  <div class="floating-element" id="element1">
    <i class="fas fa-chart-line"></i>
  </div>
  <div class="floating-element" id="element2">
    <i class="fas fa-wallet"></i>
  </div>
  <div class="floating-element" id="element3">
    <i class="fas fa-piggy-bank"></i>
  </div>
</div>
These animated icons provide one-click access to:
  • 📊 Analytics & Reports
  • 👛 Budget Management
  • 🐷 Savings Goals

​
Performance Insights

The dashboard provides intelligent insights based on your data:
AI-Powered Insights (Feature roadmap): Future updates will include automated financial insights and recommendations based on your spending patterns.
Current insights include:
  • Spending trend alerts (“You’re spending 20% more on dining this month”)
  • Budget warnings (“You’ve used 80% of your entertainment budget”)
  • Savings opportunities (“You could save €150/month by reducing subscriptions”)
  • Goal progress updates (“You’re on track to reach your vacation fund by July”)

​
Dashboard Loading

Smooth loading experience with the custom loader animation: 
// Loader from landing_page.js
function initLoader() {
  const loader = document.querySelector('.loader');
  
  if (!loader) return;
  
  // Only show if not seen in this session
  if (!sessionStorage.getItem("loaderSeen")) {
    loader.classList.remove("hidden");
    
    setTimeout(() => {
      loader.classList.add("hidden");
      document.body.style.overflow = "auto";
      sessionStorage.setItem("loaderSeen", "true");
    }, 3000);
  } else {
    loader.classList.add("hidden");
    document.body.style.overflow = "auto";
  }
}
The dashboard loader only appears once per session for better user experience.

​
Accessibility Features

Finanzapp’s dashboard is designed with accessibility in mind:
  • Keyboard navigation: Full dashboard control without a mouse
  • Screen reader support: Proper ARIA labels and semantic HTML
  • Color contrast: WCAG AA compliant color schemes
  • Text scaling: Dashboard adapts to browser text size settings
  • Focus indicators: Clear visual focus states for all interactive elements
<!-- Accessibility example from index.php -->
<meta name="aria-labelledby" content="main-title">
<button aria-label="Back to top">
  <i class="fas fa-arrow-up"></i>
</button>

​
Integration with Other Features

Savings goal progress widgets show real-time updates as you add transactions that contribute to your goals.

​
Frequently Asked Questions

Yes! Click “Customize Dashboard” to add, remove, or rearrange widgets. Your layout is saved automatically.
The dashboard updates in real-time as you add or modify transactions. Charts and stats reflect changes immediately.
Yes! Right-click any chart and select “Save as Image” or use the export button to download as PNG.
The dashboard requires an internet connection for initial load, but recently viewed data is cached for quick access.
You can export reports and charts to share, but the live dashboard is private to your account for security.

Email Notifications

Configure automated email reports and alerts

Savings Tracking

Set up and track your savings goals
Pro Tip: Use the floating chart icon (<i class="fas fa-chart-line"></i>) to quickly access detailed analytics from anywhere in Finanzapp!

Build docs developers (and LLMs) love

Get started for freeTalk to us