AutomationFlowsAI & RAG › Ai-powered Chart Generation From Web Data with Gpt-4o and Wordpress Upload

Ai-powered Chart Generation From Web Data with Gpt-4o and Wordpress Upload

ByJay Emp0 @jay-emp0 on n8n.io

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…

Event trigger★★★★☆ complexityAI-powered15 nodesExecute Workflow TriggerOutput Parser StructuredOpenAI ChatHTTP RequestAgentOpenAITool Think
AI & RAG Trigger: Event Nodes: 15 Complexity: ★★★★☆ AI nodes: yes Added:

This workflow corresponds to n8n.io template #6361 — we link there as the canonical source.

This workflow follows the Agent → Execute Workflow Trigger recipe pattern — see all workflows that pair these two integrations.

The workflow JSON

Copy or download the full n8n JSON below. Paste it into a new n8n workflow, add your credentials, activate. Full import guide →

Download .json
{
  "meta": {
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "502f1b86-95d7-49c1-9503-2a38e37ff9ba",
      "name": "When Executed by Another Workflow",
      "type": "n8n-nodes-base.executeWorkflowTrigger",
      "position": [
        992,
        -224
      ],
      "parameters": {
        "workflowInputs": {
          "values": [
            {
              "name": "prompt"
            }
          ]
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "88196843-a411-4ef0-ba4e-df54fc8f924f",
      "name": "QuickChart Object Schema",
      "type": "@n8n/n8n-nodes-langchain.outputParserStructured",
      "position": [
        1920,
        -16
      ],
      "parameters": {
        "schemaType": "manual",
        "inputSchema": "{\n  \"type\": \"object\",\n  \"properties\": {\n    \"slug\": {\n      \"type\": \"string\",\n      \"description\": \"Proposed image filename or identifier (e.g., 'ev-sales-2024')\"\n    },\n    \"width\": {\n      \"type\": \"string\",\n      \"description\": \"Pixel width of the image canvas (e.g., '500')\"\n    },\n    \"height\": {\n      \"type\": \"string\",\n      \"description\": \"Pixel height of the image canvas (e.g., '300')\"\n    },\n    \"devicePixelRatio\": {\n      \"type\": \"number\",\n      \"description\": \"Device pixel ratio (e.g., 2)\"\n    },\n    \"format\": {\n      \"type\": \"string\",\n      \"enum\": [\"png\", \"jpeg\", \"webp\", \"svg\", \"pdf\"],\n      \"description\": \"Output format of the image\"\n    },\n    \"backgroundColor\": {\n      \"type\": \"string\",\n      \"description\": \"Canvas background color in hex or named CSS color, make it white #FFFFFF by default\"\n    },\n    \"version\": {\n      \"type\": \"string\",\n      \"description\": \"Chart.js version (e.g., '3.9.1')\"\n    },\n    \"chart\": {\n      \"type\": \"object\",\n      \"properties\": {\n        \"type\": {\n          \"type\": \"string\",\n          \"enum\": [\"line\", \"bar\", \"doughnut\", \"pie\", \"polarArea\"]\n        },\n        \"data\": {\n          \"type\": \"object\",\n          \"properties\": {\n            \"labels\": {\n              \"type\": \"array\",\n              \"items\": { \"type\": \"string\" },\n              \"minItems\": 1\n            },\n            \"datasets\": {\n              \"type\": \"array\",\n              \"items\": {\n                \"type\": \"object\",\n                \"properties\": {\n                  \"label\": { \"type\": \"string\" },\n                  \"data\": {\n                    \"type\": \"array\",\n                    \"items\": { \"type\": \"number\" },\n                    \"minItems\": 1\n                  },\n                  \"backgroundColor\": {\n                    \"type\": [\"string\", \"array\"],\n                    \"items\": { \"type\": \"string\" }\n                  },\n                  \"borderColor\": {\n                    \"type\": [\"string\", \"array\"],\n                    \"items\": { \"type\": \"string\" }\n                  },\n                  \"fill\": { \"type\": [\"boolean\", \"string\"] },\n                  \"borderWidth\": { \"type\": \"number\" }\n                },\n                \"required\": [\"label\", \"data\"]\n              },\n              \"minItems\": 1\n            }\n          },\n          \"required\": [\"labels\", \"datasets\"]\n        },\n        \"options\": {\n          \"type\": \"object\",\n          \"description\": \"Chart.js configuration options including title, plugins, scales, etc.\"\n        }\n      },\n      \"required\": [\"type\", \"data\"]\n    }\n  },\n  \"required\": [\"slug\", \"chart\"],\n  \"default\": {\n    \"format\": \"png\",\n    \"backgroundColor\": \"white\"\n  }\n}\n"
      },
      "typeVersion": 1.2
    },
    {
      "id": "9a398d7a-0435-44d2-9cbb-e5156fbad68f",
      "name": "OpenAI Chat Model",
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
      "position": [
        1664,
        -16
      ],
      "parameters": {
        "model": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-4o-mini",
          "cachedResultName": "gpt-4o-mini"
        },
        "options": {}
      },
      "credentials": {
        "openAiApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1.2
    },
    {
      "id": "0afadfd3-348a-4df7-958b-c14eca32b316",
      "name": "Upload image2",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        2272,
        -224
      ],
      "parameters": {
        "url": "https://your.wordpress.com/wp-json/wp/v2/media",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "contentType": "binaryData",
        "sendHeaders": true,
        "authentication": "predefinedCredentialType",
        "headerParameters": {
          "parameters": [
            {
              "name": "Content-Disposition",
              "value": "=attachment; filename=\"chart-{{ $json.output.slug }}.png\""
            }
          ]
        },
        "inputDataFieldName": "data",
        "nodeCredentialType": "wordpressApi"
      },
      "credentials": {
        "wordpressApi": {
          "name": "<your credential>"
        }
      },
      "retryOnFail": true,
      "typeVersion": 4.2,
      "waitBetweenTries": 5000
    },
    {
      "id": "bb57c519-8dff-4bf5-8db6-a1c17c9bfb78",
      "name": "Generate Chart AI agent",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        1664,
        -224
      ],
      "parameters": {
        "text": "={{ $json.message.content }}",
        "options": {
          "systemMessage": "You are a Chart.js configuration agent. Your task is to transform a user-provided data table into a valid QuickChart JSON object compatible with line, bar, pie, doughnut, or polarArea charts.\n\nInstructions:\n1. Read and interpret the markdown table input provided by the data agent.\n2. Based on structure, choose the most appropriate chart type from:\n   - \"line\", \"bar\" \u2192 for time series or value comparison\n   - \"pie\", \"doughnut\", \"polarArea\" \u2192 for proportion-based data\n3. Construct a valid Chart.js object following QuickChart format.\n4. Always include:\n   - `type`\n   - `data.labels`\n   - `data.datasets` (with `label`, `data`, `backgroundColor`)\n   - `options.plugins.title.text` with a suitable chart title\n\nOutput only valid JSON matching the schema:\n- No code blocks\n- No markdown\n- No explanations"
        },
        "promptType": "define",
        "hasOutputParser": true
      },
      "typeVersion": 1.7
    },
    {
      "id": "e6235b7c-6b11-4cba-bc0c-9e22db2e8220",
      "name": "When clicking \u2018Execute workflow\u2019",
      "type": "n8n-nodes-base.manualTrigger",
      "position": [
        992,
        -32
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "9570f247-b9f1-49b2-b104-6adcbe32e450",
      "name": "Message a model",
      "type": "@n8n/n8n-nodes-langchain.openAi",
      "position": [
        1248,
        -224
      ],
      "parameters": {
        "modelId": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-4o-search-preview",
          "cachedResultName": "GPT-4O-SEARCH-PREVIEW"
        },
        "options": {},
        "messages": {
          "values": [
            {
              "role": "system",
              "content": "You are a data aggregation AI agent with access to real-time web search. Your goal is to collect relevant, structured, and up-to-date data from trusted sources based on the user's query.\n\nInstructions:\n1. Search the web for reliable, factual, and recent data related to the query.\n2. Extract the data into a clean, readable table format (markdown table).\n3. The table should contain categories (e.g. country, platform, year) as rows or columns depending on structure.\n4. Include source URLs for each data group, appended below the table.\n\nRules:\n- Do not interpret or visualize the data.\n- Do not generate charts.\n- Do not summarize or paraphrase data.\n- Return only the data table and source list in markdown format."
            },
            {
              "content": "={{ $json.prompt }}"
            }
          ]
        }
      },
      "credentials": {
        "openAiApi": {
          "name": "<your credential>"
        }
      },
      "typeVersion": 1.8
    },
    {
      "id": "5002b0f9-036d-4416-b36a-818c699e0b71",
      "name": "Think1",
      "type": "@n8n/n8n-nodes-langchain.toolThink",
      "position": [
        1792,
        -16
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "7612a971-459f-4106-8b0d-eda11b23f46a",
      "name": "Create QuickChart",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        2032,
        -224
      ],
      "parameters": {
        "url": "=https://quickchart.io/chart",
        "method": "POST",
        "options": {},
        "jsonBody": "={{ $json.output }}",
        "sendBody": true,
        "specifyBody": "json"
      },
      "typeVersion": 4.2
    },
    {
      "id": "b654b232-2e12-4864-a829-752b77abc3c4",
      "name": "Code",
      "type": "n8n-nodes-base.code",
      "position": [
        2496,
        -224
      ],
      "parameters": {
        "jsCode": "return {\n  \"research\" : $('Message a model').first().json,\n  \"graph_data\" :  $('Generate Chart AI agent').first().json.output,\n  \"graph_image\" : $('Upload image2').first().json,\n  \"result_image_url\" : $('Upload image2').first().json.guid.raw\n}"
      },
      "typeVersion": 2
    },
    {
      "id": "6e184446-0d1c-43fa-8bc0-862bca3b17a2",
      "name": "Sticky Note",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1216,
        -320
      ],
      "parameters": {
        "color": 5,
        "width": 336,
        "height": 448,
        "content": "## Search the web\nUsing Gpt 4o search preview and generate a table"
      },
      "typeVersion": 1
    },
    {
      "id": "abca6241-a82c-4a6f-b604-fecdb4268533",
      "name": "Sticky Note1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1568,
        -320
      ],
      "parameters": {
        "color": 4,
        "width": 624,
        "height": 448,
        "content": "## Generate chart\nUsing openchart / chart.js "
      },
      "typeVersion": 1
    },
    {
      "id": "acfa1a4d-d900-445b-a1a1-90147ee441d9",
      "name": "Sticky Note2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        2208,
        -320
      ],
      "parameters": {
        "color": 6,
        "width": 224,
        "height": 448,
        "content": "## Upload chart image to WP\n"
      },
      "typeVersion": 1
    },
    {
      "id": "5a9349d9-6d61-4aac-9ead-a3bb44506d5d",
      "name": "Sticky Note3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        1568,
        144
      ],
      "parameters": {
        "color": 7,
        "width": 864,
        "height": 576,
        "content": "## Convert the table to chart.js\n![openchart graph](https://articles.emp0.com/wp-content/uploads/2025/07/chart-apple-market-share-q1-2025.png)"
      },
      "typeVersion": 1
    },
    {
      "id": "3e89f9d7-d068-49c2-a22c-3424fa2de70e",
      "name": "Sticky Note4",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        960,
        144
      ],
      "parameters": {
        "color": 7,
        "width": 592,
        "height": 576,
        "content": "## Search the web and generate a table\n```\n[\n  {\n    \"index\": 0,\n    \"message\": {\n      \"role\": \"assistant\",\n      \"content\": \"Here is the data on Apple's market share in the mobile phone market for Q1 2025:\\n\\n\n| Q1 2025 |  Shipments | Market Share | Shipments | Market Share | Annual Growth |\\n\n|---------|------------|--------------|-----------|--------------|---------------|\\n\n| Samsung | 60.5       | 20%          | 60.0      | 20%          | 1%            |\\n\n| Apple   | 55.0       | 19%          | 48.7      | 16%          | 13%           |\\n\n| Xiaomi  | 41.8       | 14%          | 40.7      | 14%          | 3%            |\\n\n| vivo    | 22.9       | 8%           | 21.4      | 7%           | 7%            |\\n\n| OPPO    | 22.7       | 8%           | 25.0      | 8%           | -9%           |\\n\n| Others  | 94.0       | 32%          | 100.5     | 34%          | -6%           |\\n\n| Total   | 296.9      | 100%         | 296.2     | *100%        | 0%            |\\n\\n\n*Note: Percentages may not add up to 100% due to rounding.*\\n\\nSource: [Canalys Newsroom - Global smartphone market grows just 1% in Q1 after rocky start to 2025](https://www.canalys.com/newsroom/global-smartphone-market-q1-2025)\\n\\nAdditionally, according to Counterpoint Research, Apple achieved a 19% market share in Q1 2025, marking the first time it secured the top position in global smartphone sales during a first quarter. This success was driven by the launch of the iPhone 16e and strong demand in markets such as Japan and India. ([counterpointresearch.com](https://www.counterpointresearch.com/insight/post-insight-global-smartphone-market-grows-3-in-q1-2025-but-future-uncertain-apple-takes-1-spot-in-q1-for-first-time/?utm_source=openai))\\n\\n*Note: Different research firms may report varying figures due to differences in data collection methodologies.* \",\n      \"refusal\": null,\n      \"annotations\": [\n        {\n          \"type\": \"url_citation\",\n          \"url_citation\": {\n            \"end_index\": 2146,\n            \"start_index\": 1935,\n            \"title\": \"Global Smartphone Market Grows 3% in Q1 2025 But Future Uncertain; Apple Takes #1 Spot in Q1 For First Time\",\n            \"url\": \"https://www.counterpointresearch.com/insight/post-insight-global-smartphone-market-grows-3-in-q1-2025-but-future-uncertain-apple-takes-1-spot-in-q1-for-first-time/?utm_source=openai\"\n          }\n        }\n      ]\n    },\n    \"finish_reason\": \"stop\"\n  }\n]\n```"
      },
      "typeVersion": 1
    }
  ],
  "connections": {
    "Think1": {
      "ai_tool": [
        [
          {
            "node": "Generate Chart AI agent",
            "type": "ai_tool",
            "index": 0
          }
        ]
      ]
    },
    "Upload image2": {
      "main": [
        [
          {
            "node": "Code",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Message a model": {
      "main": [
        [
          {
            "node": "Generate Chart AI agent",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Create QuickChart": {
      "main": [
        [
          {
            "node": "Upload image2",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "OpenAI Chat Model": {
      "ai_languageModel": [
        [
          {
            "node": "Generate Chart AI agent",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "Generate Chart AI agent": {
      "main": [
        [
          {
            "node": "Create QuickChart",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "QuickChart Object Schema": {
      "ai_outputParser": [
        [
          {
            "node": "Generate Chart AI agent",
            "type": "ai_outputParser",
            "index": 0
          }
        ]
      ]
    },
    "When Executed by Another Workflow": {
      "main": [
        [
          {
            "node": "Message a model",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "When clicking \u2018Execute workflow\u2019": {
      "main": [
        [
          {
            "node": "Message a model",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Credentials you'll need

Each integration node will prompt for credentials when you import. We strip credential IDs before publishing — you'll add your own.

Pro

For the full experience including quality scoring and batch install features for each workflow upgrade to Pro

About this workflow

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…

Source: https://n8n.io/workflows/6361/ — original creator credit. Request a take-down →

More AI & RAG workflows → · Browse all categories →

Related workflows

Workflows that share integrations, category, or trigger type with this one. All free to copy and import.

AI & RAG

🎯 Create viral TikToks, Shorts, Reels, podcasts, and ASMR videos in minutes — all on autopilot.

OpenAI, HTTP Request, Form Trigger +7
AI & RAG

Generate AI viral videos with NanoBanana & VEO3, shared on socials via Blotato 2. Uses @blotato/n8n-nodes-blotato, googleSheets, lmChatOpenAi, toolThink. Event-driven trigger; 94 nodes.

@Blotato/N8N Nodes Blotato, Google Sheets, OpenAI Chat +9
AI & RAG

How it Works

Memory Buffer Window, Agent, Output Parser Structured +9
AI & RAG

The best content automation template in the market is now even better—with “deep research” on time-sensitive topics\! Unlike most n8n content automation templates that are mainly for “demo purposes,”

OpenAI, HTTP Request, XML +11
AI & RAG

This template is designed for marketers, content creators, and e-commerce brands who want to automate the creation of professional ad videos at scale. It’s ideal for teams looking to generate consiste

Telegram, Telegram Trigger, Google Drive +8