Chart.js Visualization Report Generator
Paste the following prompt into your AI chat to install this skill:
Please install the @user_af28adda/generate-report123 skill to your AI assistant according to https://skillhub.cn/install/skillhub.md.
About this skill
Specific Problem
In data analysis, we often need to quickly convert structured data like SQL query results, CSV summaries, or Python dicts/lists into visual reports to intuitively display trends, comparisons, or compositions. However, manually creating charts and reports can be time-consuming and tool-dependent, especially when a self-contained, shareable HTML file is required.
How the Skill Works
The Chart.js Visualization Report Generator automates this process. It takes structured data, intelligently selects chart types based on data characteristics and analysis goals, and generates HTML reports embedded with Chart.js charts and KPI cards. Core capabilities include:
- Automatic chart selection: Recommends chart types like doughnut, line, or bar based on analysis purposes (e.g., proportion, trend, comparison).
- KPI card generation: Supports displaying key metrics at the top with color coding (e.g., blue, green).
- Self-contained output: The generated HTML files load Chart.js 4.4.0 via CDN, requiring no local dependencies and viewable directly in the browser.
Key steps: First, understand the data structure (e.g., numeric, categorical, or time columns). Then, invoke the generate_report.py script, specifying the kpis list (optional, for KPI cards) and charts list (chart configuration). Finally, output to a specified path and preview. Layout rules are automatic: KPI cards max 4 columns, charts default to a 2-column grid with fixed 240px height, and tables (like Top N rankings) display full-width on separate rows.
Applicability and Considerations
This skill is suitable for rapidly generating data analysis reports, especially when integrated with DuckDB for post-query visualization. However, note the following:
- The report uses a fixed dark theme (background color #0f172a), ideal for screenshots but not customizable.
- Chart.js version is locked to 4.4.0 for stability, which may not support the latest features.
- Data format must adhere to specifications: numbers over 1000 are automatically formatted with thousand separators (e.g., ¥1,234,567), and color sequences are built-in without manual specification.
- Layout constraints: 1 chart takes full width, 3 charts use a 3-column grid, and the footer includes data source and generation time notes.
Use Cases
- After completing a DuckDB or SQL query, a data analyst needs to quickly convert results into a self-contained HTML visualization report to share and discuss trends or comparisons in team meetings.
- An operations specialist extracts quarterly sales data from CSV files and wants to generate pie charts for product composition, bar charts for regional sales trend comparison, and add KPI cards to summarize key metrics.
- A developer integrates this skill into an automated data pipeline, invoking the script after each query to generate chart reports for archiving or distribution to business departments for review.
- A product manager manually provides product metric data tables and needs to create KPI cards and line chart reports for product performance review presentations, emphasizing key performance changes.
Best For
- Data analysts: Need to visualize database query results weekly and generate easy-to-understand reports for business department review to support decision-making.
- Operations specialists: Regularly aggregate CSV or database-exported data and create chart reports for sales trend analysis and operational performance reporting.
- Data engineers: Aim to automate report generation steps when building data pipelines to ensure output consistency and shareability.
- Business analysts: Quickly create report prototypes to validate data insights and communicate analysis results to non-technical teams, reducing dependency on manual tools.
Related Skills
A universal base component that automatically launches the Edge browser and connects the BrowserSkill extension, ensuring readiness for web scraping and browser automation tasks.
A fully local-run WeChat chat analysis tool with MBTI personality inference, sentiment analysis, risk detection, relationship health assessment, and conversation prediction, emphasizing privacy.
Fetches the top 20 A-share stocks by trading volume from Wencai, including ranking, price changes, and sectors, with sector analysis.
Performs project discrimination, classification, and structured extraction on bidding documents, outputting standardized data with support for manual review.