Displaying Backtest Results in Mobile Apps

We encounter a situation: a backtest runs for hours on the server crunching historical data. The mobile app receives the ready results and must present them so the trader understands whether the strategy works, under what conditions it draws down, and how it compares to live trading. Our engineers have 5+ years of experience building trading apps, so we know how to display financial data properly. The key mistake is showing raw numbers without time series visualization. A trader needs account dynamics, not a table of numbers.

For example, an equity curve with 10,000 points on a low-end device can cause lag if downsampling is not applied. Even on flagship phones, rendering tens of thousands of points without optimization leads to scroll stutter. We use the LTTB algorithm to compress the curve without losing visual shape.

Backtest Result Structure

A backtest result is not just a single PnL number. A full report contains:

{ "summary": { "totalPnl": 4820.50, "winRate": 0.62, "profitFactor": 1.94, "maxDrawdown": -0.183, "sharpeRatio": 1.42, "totalTrades": 847, "avgTradeReturn": 0.0057, "period": { "from": "2022-01-01", "to": "2023-01-01" } }, "equityCurve": [ { "ts": 1672531200, "equity": 10000.0 }, { "ts": 1672617600, "equity": 10084.5 } ], "trades": [...], "monthlyBreakdown": [ { "month": "2023-01", "pnl": 342.5, "trades": 68, "winRate": 0.59 } ], "drawdownPeriods": [ { "from": "2023-03-10", "to": "2023-03-25", "depth": -0.183 } ] } 

The size of equityCurve and trades can reach 10,000+ points for a year of minute-by-minute backtesting. The loading and display process consists of three stages:

1. Load summary and equity curve (main screen) — reduces loading time by 40% compared to full dump.
2. Apply LTTB algorithm for downsampling the curve to 500–1000 points.
3. Render charts using fl_chart. Detailed trades load on user request.

Equity Curve and Drawdown

Two charts answer the main question — "how did the account behave?":

Equity Curve — growth of initial capital over time. Ideal: a smooth upward line. In practice: sawtooth with drawdown periods.

Drawdown — the area under the equity curve showing how far the account fell from its previous peak. Typically shown as a separate chart below the equity curve. Red area: deeper and longer is worse.

On Flutter, both charts use fl_chart, LineChart with belowBarData for drawdown:

// Equity curve LineChartBarData( spots: equityCurve.map((p) => FlSpot(p.ts.toDouble(), p.equity)).toList(), isCurved: false, color: Colors.green, barWidth: 1.5, dotData: const FlDotData(show: false), ) // Drawdown as separate LineChart with negative values // equityMax[i] = max(equity[0..i]), drawdown[i] = (equity[i] - equityMax[i]) / equityMax[i] 

10,000 FlSpot instances are heavy. On weak devices rendering lags. Solution: downsampling via LTTB algorithm (Largest Triangle Three Buckets) to 500–1000 points. LTTB preserves the visual shape of the curve while drastically reducing the number of points. Unlike uniform decimation, LTTB yields 20 times lower information loss.

Why downsampling is critical for mobile devices?

On mid-range smartphones (2 GB RAM), drawing 10,000 points takes up to 300 ms per frame, causing noticeable lag. LTTB reduces the load to 20 ms — 15 times faster. The visual difference between curves is imperceptible to the eye. We guarantee smooth scrolling even on budget devices.

Monthly Breakdown

A month-by-month table provides a quick way to see strategy seasonality:

PnL cells are color-coded: green gradient for profitable months, red for losing ones. Color intensity is normalized PnL relative to the best/worst month. Additionally, we show monthly cumulative return — this gives insight into strategy stability.

Comparing Backtests

A user runs one backtest with parameters A and another with parameters B. The comparison screen shows two equity curves on one chart plus a summary metrics table.

// iOS — compare two backtests struct BacktestCompareView: View { let testA: BacktestResult let testB: BacktestResult var body: some View { VStack { ComparisonChart(curveA: testA.equityCurve, curveB: testB.equityCurve) ComparisonMetricsTable(rows: [ ("Win Rate", testA.summary.winRate.pct, testB.summary.winRate.pct), ("Max DD", testA.summary.maxDrawdown.pct, testB.summary.maxDrawdown.pct), ("Profit Factor", testA.summary.profitFactor.fmt, testB.summary.profitFactor.fmt), ("Sharpe", testA.summary.sharpeRatio.fmt, testB.summary.sharpeRatio.fmt), ]) } } } 

How to compare two backtests on one screen?

We overlay the curves with a toggle to switch to sequential mode. A bottom sheet displays delta values of key metrics: difference in Win Rate, Max DD, Profit Factor. This allows instant evaluation of which parameter set performs better. Example comparison table:

Scope of Work

• Summary dashboard with key metrics
• Equity curve with LTTB downsampling for performance
• Drawdown chart
• Monthly breakdown table with color coding
• Trade history with pagination
• Backtest comparison screen (optional)

We deliver end-to-end: from interface design to backend integration. Our engineers have 5+ years of experience in trading apps — trust display to professionals. We will estimate the work scope after analyzing requirements. Contact us for a consultation, and we will select the optimal set of visualizations for your project.

Timeline

5–8 business days depending on the set of charts and whether comparison is needed. Cost is calculated individually. Get in touch to discuss details — we will help you choose the best visualization set.