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:
{
"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:
{
"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
| Problem | Solution |
|---|---|
| Chart shows "No data source" | Add data: { upstream: true } to chart config |
| Chart times out | Check that edge connects query to chart |
| Data outdated | Refresh canvas to reload queries |