prompts.chatprompts.chatprompts.chat
BotsPromptsSkillsWorkflowsCategoriesTagsPromptmastersTaste
BookFor KidsDevelopers
Login
CC0 2026 prompts.chat
DeepWikiHow to...DocsAPIPrivacyTermsSupportAboutGitHub

Live CSV Dashboard Builder

Upload CSV data and interactively build a dashboard with multiple linked charts (bar, line, pie, scatter).

邱
@loshu2003
9 months agoJanuary 25, 2026 at 08:17 AM
Coding•AI Tools

Content

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Live CSV Dashboard Builder

**Main Purpose:** Upload CSV data and interactively build a dashboard with multiple linked charts (bar, line, pie, scatter).

**Key Features to Implement:**
* CSV upload (PapaParse)
* Column selection for axes/values
* Chart type selection per panel
* Dynamic filtering controls (sliders, dropdowns)
* Dashboard layout persistence (LocalStorage)
* Chart image export
* Glassmorphism UI panels
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).
* File input using FileReader API if data import (like CSV) is explicitly mentioned or implied.
* File output/download using Blobs if data/image/file export is explicitly mentioned or implied.

**Primary Libraries to Use (via Zero-Config CDN):**
* Chart.js (use latest zero-config CDN link)
* PapaParse (use latest zero-config CDN link)
* Ensure all external libraries are loaded via reliable, versioned CDN links (e.g., from cdnjs, jsdelivr, unpkg).

**Technical & Style Requirements:**
* **Single File:** All HTML, CSS, and JavaScript MUST be contained within a single `.html` file. CSS must be within `<style>` tags in the `<head>`, and JavaScript within `<script>` tags near the end of the `<body>`. Use ES6 modules within the script tag if it helps organize complex code.
* **Zero Setup:** The app must run directly when the HTML file is opened in a modern browser (Chrome, Firefox, Edge). No build steps, installations, or API keys allowed.
* **Modern Code:** Use HTML5 semantic elements, modern CSS3 features (Flexbox/Grid for layout), and ES6+ JavaScript syntax (const/let, arrow functions, classes, async/await where appropriate).
* **Visual Polish:** Implement a clean, modern, and responsive UI. Incorporate CSS3 Glassmorphism effects (subtle background blur and transparency on relevant containers, panels, or modals) for a contemporary aesthetic. Ensure good readability, contrast, and usability across different screen sizes.
* **Complexity & Interactivity:** The implementation should match the complexity implied by the features, comparable to an advanced interactive tool or dashboard. Ensure the app feels responsive and interactive.
* **Error Handling:** Include basic client-side error handling (e.g., for file parsing issues, invalid user input, potential API errors if using browser APIs).
* **Comments:** Add comments to explain key sections and complex logic within the JavaScript code.

Generate the complete HTML file content starting with `<!DOCTYPE html>` and ending with `</html>`. Ensure the code is well-formatted and functional.

Comments (0)

Related Prompts

Sidebar Dashboard Design

Text

Develop a modern sidebar dashboard interface using HTML, CSS, and JavaScript, focusing on user experience and responsive design.

f@furkanerbm
2

Linux Monitoring Dashboard with React

Text

Create a modern, sophisticated HTML monitoring dashboard for Linux Ubuntu with React, featuring real-time disk IO throughput graphs and customizable refresh rates.

T@mgtf3r
0

Weather Dashboard

Text

Build a comprehensive weather dashboard

F@f
0

Budget Tracker

Text

Develop a comprehensive budget tracking application

F@f
0