AI-Powered Chart Generation from Web Data with GPT-4o and WordPress Upload

AI-Powered Chart Generation from Web Data

This n8n workflow automates the process of: Scraping real-time data from the web using GPT-4o with browsing capability Converting markdown tables into Chart.js-compatible JSON Rendering the chart using QuickChart.io Uploading the resulting image directly to your WordPress media library

🚀 Use Case

Ideal for content creators, analysts, or automation engineers who need to: Automate generation of visual reports Create marketing-ready charts from live data Streamline research-to-publish workflows

🧠 How It Works

1. Prompt Input Trigger the workflow manually or via another workflow with a prompt string, e.g.:

Generate a graph of apple's market share in the mobile phone market in Q1 2025

2. Web Search + Table Extraction The Message a model node uses GPT-4o with search to: Perform a real-time query Extract data into a markdown table Return the raw table + citation URLs

3. Chart Generation via AI Agent The Generate Chart AI Agent: Interprets the table Picks an appropriate chart type (bar, line, doughnut, etc.) Outputs valid Chart.js JSON using a strict schema

4. QuickChart API Integration The Create QuickChart node: Sends the Chart.js config to QuickChart.io Renders the chart into a PNG image

5. WordPress Image Upload The Upload image node: Uploads the PNG to your WordPress media library using REST API Uses proper headers for filename and content-type Returns the media GUID and full image URL

🧩 Nodes Used

Manual Trigger or Execute Workflow Trigger OpenAI Chat Model (GPT-4o) LangChain Agent (Chart Generator) LangChain OutputParserStructured HTTP Request (QuickChart API + WordPress Upload) Code (Final result formatting)

🗂 Output Format

The final Code node returns: { "research": { ...raw markdown table + citations... }, "graph_data": { ...Chart.js JSON... }, "graph_image": { ...WordPress upload metadata... }, "result_image_url": "https://your-wordpress.com/wp-content/uploads/...png" } ⚙️ Requirements OpenAI credentials (GPT-4o or GPT-4o-mini)

WordPress REST API credentials with media write access

QuickChart.io (free tier works)

n8n v1.25+ recommended

📌 Notes Chart style and format are determined dynamically based on your table structure and AI interpretation.

Make sure your OpenAI and WordPress credentials are connected properly.

Outputs are schema-validated to ensure reliable rendering.

🖼 Sample Output