Convert JSON to Chart Data

Turn structured data into chart-ready output for dashboards and visual reports.

Convert JSON to Chart Data

What does it do?

The Convert JSON to Chart Data node turns structured data into chart-ready output. Think of it like a business analyst who looks at your numbers and suggests the best chart before your dashboard displays it.

Smart Features

• Accepts input in different forms: You can use data from an earlier node, paste structured data directly, or pass ready-made records.

• Can pick the chart for you: Choose Auto detect and Diaflow selects a chart style based on your data.

• Can follow your chart choice: If you already know the chart you want, Diaflow uses that type instead.

• Uses a preview to map fields quickly: It checks sample rows to match the right labels and values.

• Returns the full dataset with the chart settings: The result includes both the chart setup and all of your original records.

Real-World Business Value

• Turn monthly sales records into a chart for a management dashboard.

• Visualize survey results by region, product, or customer segment without building charts by hand.

• Convert workflow results into chart-ready data before sending them to an app, report, or presentation step.

Step-by-Step Setup

• In the Input field, select structured data from an earlier step using @.

• Make sure the input is a list of records, not a plain sentence or document.

• In Chart type, choose Auto detect if you want Diaflow to decide.

• Choose a specific option like Bar chart, Line chart, Pie chart, or Donut chart if you already know the best format.

• Run the workflow and review the output fields to confirm the selected chart type and mapped data fields.

The Transformation: Before & After

Before

[
  { "month": "Jan", "revenue": 1200 },
  { "month": "Feb", "revenue": 1500 },
  { "month": "Mar", "revenue": 1700 }
]

After

{
  "type_chart": "line-chart",
  "params": {
    "xField": "month",
    "yField": "revenue",
    "smooth": true
  },
  "data": [
    { "month": "Jan", "revenue": 1200 },
    { "month": "Feb", "revenue": 1500 },
    { "month": "Mar", "revenue": 1700 }
  ]
}

Tips & Warnings for First-Timers

• Use a list of records as the input. A single plain object or empty data will fail.

• Keep your field names consistent across all rows. If later rows use different names, the chart choice may be wrong.

• Put the most representative rows first. Diaflow looks at the first few rows when choosing the chart.

• Flatten nested data before using this node. Deeply nested fields are not chart-friendly here.

• Avoid mixing text and numbers in the same field. Clean data gives better chart choices.

• If the output looks odd in Auto detect, pick the chart type manually.

• Large interactive chart experiences are better handled after this step. This node prepares chart data, but it is not meant for live chart editing.

• If your pasted input includes extra explanation text around the data, remove it first to avoid invalid input errors.

Need help?

• Learn the basics in How a node works

• Build the full flow in Create a workflow

• Browse related nodes in Component List