Variance Analysis

Compare budget, forecast, and actual with grouped grids, waterfall charts, and traffic-light formatting.

Overview

Variance Analysis is a single-page browser app for finance teams who need to explain differences between planned and actual performance. It uses AG-Grid for grouped detail rows, Chart.js for a top-variances waterfall, SheetJS for separate budget and actual imports, and Alpine.js for scenario switching — all in one HTML file.

Key features

Variance grid

• AG-Grid with Budget, Actual (or Forecast), Variance $, and Variance % columns
• Rows grouped by department and category with expandable subtotals
• Green/red conditional formatting on favorable vs unfavorable variances
• Explanation column with tooltips for narrative context

Scenario comparison

• Compare any pairing: Budget vs Actual, Budget vs Forecast, or Forecast vs Actual
• Dropdown selectors plus one-click preset buttons
• Grid headers and variance calculations update instantly

Waterfall chart

• Chart.js stacked-bar waterfall showing the top 8 variances
• Green bars for positive, red for negative deltas
• Refreshes when scenario or imported data changes

Summary cards

• Total baseline and compare amounts for the active scenario
• Net variance in dollars and percent
• Count of favorable and unfavorable line items

Data import

• Separate Import budget and Import actual file uploads
• SheetJS parses Excel/CSV; matches rows by Department and LineItem
• New rows append; existing rows merge; data persists in localStorage

Theme & layout

• Responsive layout from mobile to desktop
• Dark mode toggle with saved preference
• AG-Grid dark theme and chart color adaptation

Data & persistence

• 12-line sample dataset across Sales, Marketing, Operations, and G&A
• Each row includes budget, forecast, actual, and explanation text
• Imported data saved to `localStorage` (`varianceAnalysis_v1`)
• Expense vs revenue logic drives favorable/unfavorable coloring

Charts & reporting

• Waterfall visualization for largest absolute variances
• Summary cards aggregate totals for the selected scenario pair

Built with

Tailwind CSS, Alpine.js, AG-Grid Community, Chart.js, and SheetJS — loaded from CDN in a single HTML page.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.