Skip to content

Canvas Data Flow ​

Connect query nodes to chart nodes and build data pipelines.

How Data Flows ​

Query nodes load data from files. Canvas edges carry that data to connected charts. Charts render the received data.

┌─────────────┐         ┌─────────────┐
│ Query Node  │──edge──>│ Chart Node  │
│ loads CSV   │         │ renders bar │
└─────────────┘         └─────────────┘

Building a Pipeline ​

Step 1: Create a Query Node ​

Add a text node with dgExtension to your canvas:

json
{
  "type": "text",
  "dgExtension": {
    "nodeType": "query",
    "query": "file: data/sales.csv"
  }
}

Step 2: Create a Chart Node ​

Add another text node configured to receive upstream data:

json
{
  "type": "text",
  "text": "```dg\ndata:\n  upstream: true\ntype: bar\nx: region\ny: revenue\n```",
  "dgExtension": {
    "nodeType": "chart",
    "chartConfig": "data:\n  upstream: true\ntype: bar"
  }
}

Step 3: Connect with an Edge ​

Draw an edge from the query node to the chart node. The chart waits for data, then renders when the query completes.

Data Caching ​

Query results stay cached for 60 seconds. Multiple charts connected to one query share the cached data. The cache clears when you close the canvas.

Timing ​

Charts display "Waiting for upstream data..." while the query loads. The timeout is 10 seconds. If data arrives after timeout, refresh the canvas.

Multiple Charts ​

One query can feed many charts:

                    ┌─────────────┐
                 ┌─>│ Bar Chart   │
┌─────────────┐  │  └─────────────┘
│ Query Node  │──┤
│ sales.csv   │  │  ┌─────────────┐
└─────────────┘  └─>│ Pie Chart   │
                    └─────────────┘

Each chart receives the same data and renders independently.

Troubleshooting ​

ProblemSolution
Chart shows "No data source"Add data: { upstream: true } to chart config
Chart times outCheck that edge connects query to chart
Data outdatedRefresh canvas to reload queries

Released under the MIT License. Built by Boundary Lab.