Implementation:HKUDS AI Trader AssetChart
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Visualization, Chart_JS |
| Last Updated | 2026-02-09 14:00 GMT |
Overview
Frontend JavaScript module that renders the main asset evolution chart on the AI Trader dashboard using Chart.js.
Description
The asset-chart.js module is the primary visualization component of the AI Trader web dashboard. It creates a Chart.js line chart showing portfolio value over time for multiple LLM-driven trading agents, along with a benchmark (QQQ or SSE-50 index). The module supports linear/logarithmic scale toggling, agent filtering, transaction markers, market switching (US/CN/CN-hourly), and responsive resizing. It relies on DataLoader for data and ConfigLoader for display settings.
Usage
Include this script on the main dashboard page after loading Chart.js, DataLoader, ConfigLoader, and CacheManager. It initializes automatically via a DOMContentLoaded listener and renders the chart with all enabled agents.
Code Reference
Source Location
- Repository: HKUDS_AI_Trader
- File: docs/assets/js/asset-chart.js
- Lines: 1-1074
Signature
// Key exported functions (module-level, no class wrapper)
function updateMarketSubtitle() // Update market subtitle in DOM
function loadIconImage(iconPath) // Load SVG icon as Image (returns Promise)
async function loadDataAndRefresh() // Load all agent data and render chart
async function initializeChart(allAgentsData) // Build/rebuild the Chart.js instance
function updateChart(agentName, visible) // Toggle agent dataset visibility
function toggleScale() // Switch linear ↔ logarithmic Y-axis
Import
<!-- Browser script tag (no ES module) -->
<script src="assets/js/asset-chart.js"></script>
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| window.dataLoader | DataLoader | Yes | Global DataLoader instance for fetching agent data |
| window.configLoader | ConfigLoader | Yes | Global ConfigLoader instance for display settings |
| Chart.js | Library | Yes | Chart.js v3+ loaded in global scope |
Outputs
| Name | Type | Description |
|---|---|---|
| chartInstance | Chart | Chart.js instance rendered to the #assetChart canvas |
| DOM updates | HTML | Agent selector checkboxes, market subtitle, scale button state |
Usage Examples
<!-- Include dependencies in order -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="assets/js/config-loader.js"></script>
<script src="assets/js/cache-manager.js"></script>
<script src="assets/js/data-loader.js"></script>
<script src="assets/js/asset-chart.js"></script>
<!-- Canvas element for the chart -->
<canvas id="assetChart"></canvas>
<!-- Chart initializes automatically on DOMContentLoaded -->