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.