Chart — Project-Based Interactive Charting

Chart — Project-Based Interactive Charting

Generate interactive chart pages with Apache ECharts. Each chart lives in a dedicated project folder under output/​chart-html/, making it easy to reuse and iterate.

When to Use

Any time the user wants a visual chart: price charts, comparisons, dashboards, business analytics, etc.

Architecture

• ECharts (CDN) for rendering
• ECharts native export (getDataURL) + canvas merge for reliable PNG output
• Project-based storage: one folder per chart project
• No gallery mode: all artifacts stay in the project folder

Project Structure (Required)

Each chart project should follow:

output/​chart-html/
  <project-name>/
    index.html        # chart page
    generate.py       # generation script (for reproducibility)
    README.md         # title / description / data source notes
    data.json         # data snapshot
    screenshot.png    # saved image

Example folder name: btc-90d-20260401

Workflow

Step 1: Pick template or custom layout

Available templates:

Step 2: Create project folder

Use create_project(name, description, data_sources) from scripts/​build_chart.py.

Step 3: Build and save chart page

Use either:

• build_chart(template_name, ...)
• build_chart_custom(...)

Then save as index.html in the project folder:

• save_chart(html, project_dir=project_dir)

Step 4: Save reproducible assets

Also save:

• save_generate_script(script_content, project_dir) → generate.py
• save_data(data, project_dir) → data.json
• project README is created by create_project(...)

Step 5: Serve preview

Use project-root serving (recommended):

preview_serve(
  title="Chart Preview",
  dir="skills/​chart/​scripts",
  command="python3 chart_server.py /​data/​workspace/​output/​chart-html 7860",
  port=7860
)

Then open: /​preview/<id>/<project-name>/​index.html

Important behavior in v3.0.1:

• chart_server.py now rewrites preview-prefixed static paths internally (/​preview/<id>/​... → /​...) before filesystem lookup.
• This guarantees the preview iframe resolves the real project index.html instead of falling back to root directory listing.
• Keep project pages under output/​chart-html/<project>/​index.html (do not serve output/​chart-html directly as a static preview without chart_server.py).

Step 6: Export image

Two modes:

1. User wants web page + image: click "💾 Save Image" in page toolbar, saves to current project as screenshot.png
2. User wants image only: call screenshot_chart(project_dir) (Playwright) and send screenshot.png directly

Toolbar Requirements

Every chart page must include these buttons:

<div class="actions">
  <button onclick="downloadPNG(this)">📥 Download PNG</​button>
  <button onclick="copyToClipboard(this)">📋 Copy Image</​button>
  <button onclick="saveToProject(this)">💾 Save Image</​button>
</​div>

Do not include gallery entry.

Key Files

Notes

• Embed data directly in HTML (const DATA = ...) to avoid iframe CORS issues.
• For multi-chart pages, register all chart instances in window.CHART_INSTANCES.
• Use meaningful project names (topic-range-date) for easy lookup.