Chart Studio — Visual Reporting Tool

A single-page, self-contained web application that renders interactive charts and visual reports entirely client-side. Chart Studio lets users create, customize, brand, and export professional charts and reports — all from a single HTML file with zero server-side dependencies.

Features

• Six Chart Types — Bar, line, pie, area, scatter, and radar charts with full customization (colors, labels, legends, axes, tooltips, responsive sizing)
• Real-Time API Playground — Author JSON chart definitions with instant schema validation, descriptive error messages, and live preview
• No-Code Workflow — Template picker, paste-from-spreadsheet data editor (TSV/CSV), drag-and-drop field mapping, and one-click report generation
• Three Report Templates — Executive Summary, KPI Dashboard, and Data Comparison layouts with multi-chart branded output
• White-Label Branding — Hex color pickers (primary, secondary, accent), logo URL input with live preview, and curated font selector (10+ web-safe and Google Fonts)
• Browser-Native Export — PNG (2× resolution), SVG (clean vector), and multi-page PDF via jsPDF and html2canvas — no server round-trip
• Embeddable Output — Generate iframe markup, inline SVG, base64 data URIs, and copyable image URLs for every chart
• On-Page Documentation — Quick-start walkthrough, annotated JSON examples, contextual tooltips, and guided first-run tour

Prerequisites

To use the application: Any modern web browser (Chrome, Firefox, Safari, or Edge — latest two versions supported). No installation required.

To run the automated test suite: The following are needed:

• Node.js (v16 or later) or Python 3 (3.8 or later)
• Playwright browser automation library
  • Node.js: npm install playwright
  • Python: pip install playwright && python -m playwright install

Installation

No build step, package manager, or installation is required to use Chart Studio. The entire application is a single self-contained HTML file (src/index.html) with inline CSS and JavaScript.

1. Clone or download the repository:

   git clone <repository-url>
   cd <project-directory>

2. That's it. The application is ready to use.

Running the Application

Open src/index.html directly in any modern browser:

# macOS
open src/index.html

# Linux
xdg-open src/index.html

# Windows
start src/index.html

Or serve it from any static file server — the file works at any arbitrary path URL without configuration or URL rewriting:

# Python
python3 -m http.server 8080

# Node.js (npx)
npx serve .

# Then navigate to http://localhost:8080/src/index.html

You can also deploy the file to any static hosting provider (GitHub Pages, Netlify, S3, Cloudflare Pages, etc.) by uploading src/index.html.

Running the Tests

The project includes a comprehensive test suite (49 tests across 7 groups) that runs in a headless browser via Playwright. Two equivalent test runners are provided:

Using Node.js

node run-tests.cjs

This starts a local static server on port 9876, launches a headless Chromium browser, executes the test suite at tests/test-suite.html, and writes results to test-results/results.json.

Using Python

python3 run-tests.py

This starts a local static server on port 9877, launches a headless Chromium browser, executes the test suite, and writes results to test-results/results.json.

Test Suite Coverage

Group	Tests	Description
Chart Type Rendering	6	Verifies all six chart types render without errors
Branding Propagation	6	Confirms branding changes propagate to CSS, charts, SVG exports, and events
JSON Schema Validation	11	Tests validation of chart definitions (missing fields, invalid types, syntax errors)
Export Formats	5	Validates PNG, SVG, and PDF export output
Embed Snippets	7	Verifies iframe, SVG, data URI, and image URL embed generation
TSV / Spreadsheet Parsing	7	Tests CSV/TSV parsing, quoted fields, multi-column data, and edge cases
Report Templates	7	Validates all three report templates render with branded headers and chart canvases

Viewing Results

After running, test results are saved as JSON at:

test-results/results.json

You can also open tests/test-suite.html in a browser to run the tests interactively with a visual UI.

Configuration Options

Chart Studio requires no external configuration files. All configuration is done through the in-app UI:

Chart Configuration (UI Controls)

• Chart Type — Select from bar, line, pie, area, scatter, or radar
• Data Input — Paste spreadsheet data (TSV/CSV) or enter data manually
• Labels & Titles — Chart title, axis labels, legend position
• Colors — Per-dataset color customization
• Axes — Min/max values, step size, grid display, axis formatting
• Tooltips — Enable/disable, custom formatting
• Responsive Sizing — Automatic or fixed dimensions

API Playground (JSON Schema)

Define charts programmatically using a JSON schema. Example:

{
  "type": "bar",
  "labels": ["Q1", "Q2", "Q3", "Q4"],
  "datasets": [
    {
      "label": "Revenue",
      "data": [120, 190, 300, 250],
      "backgroundColor": "#4f46e5"
    }
  ],
  "options": {
    "title": "Quarterly Revenue",
    "legend": true
  }
}

White-Label Branding

• Primary Color — Main theme color (hex)
• Secondary Color — Supporting color (hex)
• Accent Color — Highlight/call-to-action color (hex)
• Logo URL — URL to a logo image displayed in headers and exports
• Font Family — Choose from 10+ web-safe and Google Fonts

Branding settings apply consistently across all chart renders, report templates, and exported files.

CDN Dependencies

Chart Studio loads the following libraries from public CDNs at runtime:

Library	Version	CDN	Purpose
Chart.js	4.4.7	jsDelivr	Chart rendering engine
html2canvas	1.4.1	jsDelivr	PNG and PDF rasterization
jsPDF	2.5.2	jsDelivr	PDF document generation

No proprietary SaaS dependencies are used at runtime.

Project Structure

├── src/
│   └── index.html          # The complete application (single HTML file)
├── tests/
│   └── test-suite.html     # Browser-based test suite (49 tests)
├── test-results/
│   └── results.json        # Test run output
├── run-tests.cjs            # Node.js/Playwright test runner
├── run-tests.py             # Python/Playwright test runner
└── README.md                # This file

Browser Compatibility

Chart Studio is tested and supported on the latest two versions of:

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge

Both desktop and tablet viewports are supported.

Performance

• Page load: Under 3 seconds on a 25 Mbps connection (cold CDN load)
• File size: Under 2 MB total HTML
• Live preview: Sub-second updates for typical payloads (≤1,000 data points)

License

See the project repository for license information.

---

Built by HermesOrg — an orchestration of distinct AI personas working in concert. Product Manager → Designer → Engineer → QA, each contributing expertise to build something real.