Guides
Build on the canvas
A connected AI agent is the fastest way to build a dashboard. For that path, read Connect your AI agent. This guide is the manual path: what you can do with a click or a form, and where you need JSON instead.
The whole dashboard is one piece of JSON. The canvas and the Source panel show that JSON in two ways. When you drag a block, its position changes in the JSON. When you apply JSON, the canvas changes.
Before you start
Open a dashboard that you can edit, and set the mode switch in the header to Edit. A phone-size window stays in view mode. To edit, use a desktop or tablet window.
When you are signed in, a dashboard saves itself to your account as you edit. It is private until you publish it: see Share a dashboard. When you are not signed in, your dashboards stay in this browser only. If you clear the browser or change devices, they are lost. Sign in to save them to your account.
Start on the empty canvas
An empty dashboard shows a short walk under the title Start your dashboard:
The walk shows only the steps that you can take now. While the dashboard has no data:
- Upload a file — opens the file picker and imports the picked file. This step leads.
- Connect BigQuery — opens the Data workspace on a new BigQuery datasource. The step shows when you can run BigQuery: sign in first.
- Connect to a shared datasource — opens the Data workspace on the datasource library, where each shared datasource shows its description. The step shows when you are signed in and the library holds a datasource that you can use.
- Connect an AI agent — opens the Connected agents section of your Settings page. The step goes away after you connect an agent.
After a datasource has rows, Make a chart leads the walk and inserts a chart block. The data steps become one line under it: Add more data.
The fastest start is a data file. Drop a CSV, Excel, JSON, or Parquet file anywhere on the canvas. The Data workspace shows the file's columns and rows first. Select Create datasource, and a table block bound to the new datasource appears where you dropped the file. If the canvas cannot take the file, a notice says why and what to do first. For the other ways to bring data in, such as a paste, a query, or a Google Sheet, read Bring data in.
Make one chart
Make one chart when you want a chart and not a dashboard. The chart opens in the Chart workspace. You share and publish a chart the way you share and publish a dashboard.
You need nothing first. Without an account, the chart stays in this browser.
- On the Charts page, select New chart. On the landing page, select Try it without an account.
-
Start the chart one of three ways:
- Drop a CSV, JSON or Parquet file on the dashed box, select Upload a file, or select Paste rows. The Data workspace shows the columns and rows. Select Create datasource.
- Paste a Vega-Lite spec in Paste a Vega-Lite spec, and select Make the chart. Rows inside the spec move to a datasource of their own.
- Select an example. It draws on the sample data.
The chart opens in the Chart workspace. It lists on the Charts page, apart from your dashboards, and stays there if you add a note or a second chart.
If a pasted spec reads its rows from an address, the box says what to do. Download the file and drop it, or add the address in the Data workspace first.
Work on one chart in the Chart workspace
The Chart workspace shows one chart large, its code on the right, and its rows under it. To open it, select ⋯ on a chart in edit mode, then Open in Chart workspace.
- Type in the code pane. The chart draws the code when you pause. Valid code saves itself. Code that does not parse saves nothing, and the chart names the error.
-
Inside
"transform": [ ], open the completion list to add a step, such as a filter or a running total. Tab moves through the parts of the step. - Under the chart, As drawn shows one row per mark. As it arrives shows the datasource's rows with the chart's filters.
- To undo a save, use undo, or put back an earlier version.
Select ‹ Canvas to go back to the canvas.
Publish one chart from a bigger dashboard
When you publish a dashboard, every chart and every row of every datasource is public. To publish one chart alone, copy it to a dashboard of its own first.
- On the chart, select ⋯, then Copy to its own dashboard. The Chart workspace also has this button.
- The copy opens in the Chart workspace. It holds the chart and only the data it reads. Select Publish.
The copy does not change when you change the original. To publish a change, change the copy and publish it again. Publish shows only when you are signed in and this site allows publishing.
Add a block
In edit mode, the header holds the block palette: a Chart button and an Add menu.
- To add a chart, select Chart.
- To add a block of another type, select Add, then select the type. Each type in the menu has a one-line description of the block.
The new block appears at the center of the view, selected, with its editor open.
- Chart — one chart drawn from a datasource's saved rows.
- Scorecard — one number: a column reduced over the rows, with an optional delta and sparkline.
- Table — the rows themselves, paginated, with format rules.
- Sankey — a flow diagram over two columns: where something came from and where it went, drawn as stages with ribbons between them.
- Control — a filter, a slider or a field list bound to a param, the dashboard's named value.
- Note — markdown text.
- Article — starts an article beside the canvas and places a card for it on the canvas (Write up a finding in an article).
- Image — a picture from a web address.
- Shape — a drawn rectangle or ellipse with a label, for annotation.
- Section — a titled region that carries the blocks inside it.
- Frame — a named sheet that a reader reads as one page (Make pages with frames).
- Connector — a line between two blocks. The Add menu has no connector. Add a connector in the Source panel, or ask an agent.
A composite chart, such as facets, repeats, or side-by-side views, needs JSON. Open a chart block in the Chart workspace and paste its spec into the code pane. The chart shows the composition.
NOTE — A block form applies each change at once. The live block on the canvas is the preview, and each change is one undo step.
Shape a chart where it stands
Select a chart, and small authoring blocks appear around it, in four zones:
- The data bar on the top edge of the chart: Data, Fields and Filters.
- The Marks card at the left of the chart: the mark in its header, then a row for each channel in use, such as Color or Tooltip. One line names the channels that are not in use. Select it to show them.
- The Chart card under the Marks card: Title, Comparison, Reference line, Cross-filter, Block size and Code. The card stays folded until you select its name.
- The axis blocks: X under the chart, and Y at its right.
Each authoring block shows its current setting, and opens one popover with the controls for that setting.
- If the chart is blank, pick a chart type from the grid in its body. In a short block, such as a new chart, the grid shows every type as one flat set of tiles. In a taller block, and in the popover of Chart type in the Marks card's header, the grid groups its templates by intent: Compare amounts, Change over time, Part-to-whole, Relationship, Distribution.
- If you picked Bullet or Combo, select Settings in the chart's header. The chart's form opens beside it. For a bullet, pick the Category, the Actual and the Target fields. For a combo, pick the X axis, the Bars and the Line fields. A number field adds up per category; change its aggregate below the field.
- Open a channel block, such as X, Y, or Color, and pick a field. The popover also holds the field type, the aggregate, and the bin or time unit that fits the type. The field type uses the words of the Data workspace: Number, Category, Ordered, and Time. On a number field, one click on sum or avg sets the field and the aggregate together. The picker also offers the datasource's measures: pick a measure such as ROAS, and the chart computes it per category.
- To bind a field by drag, open Fields in the data bar. Drag a field from its list onto a channel block.
- To change the mark and its settings, open the mark in the header of the Marks card.
- To sort a category axis, use the popover of that channel.
- To show the value of each mark, open Labels in the Marks card and turn it on. If Labels is not in the card, select the line of unused channels first.
- To add a reference line, open Reference line in the Chart card and select Add line. The new line shows the average of the measure. You can change each line to a fixed value or a statistic.
- Set the tooltip in Tooltip in the Marks card: Off, Chart fields, or a custom field list.
- To draw the series over an earlier period too, open Comparison in the Chart card and turn on Compare periods.
- To show the measure as a running total, a change from the previous value, a share of the total, a rank, a percentile, or a moving average, open the block of the measure axis and select a mode in Show as. In Computed over, select where the computation restarts: Each series, Each X value (for example, each region's share of its month), or All marks. To show the plain values again, select Value.
The Code block in the Chart card lists what the spec holds beyond these controls, such as transforms, selections, and extra channels. Its Edit spec opens the chart in the Chart workspace, with the cursor in the code pane (see Edit the spec of a chart). If you layer a spec by hand beyond labels and reference lines, the authoring blocks close, and you edit that chart as JSON. A chart has no separate settings form.
Make a scorecard
You build a scorecard on the canvas like a chart. Select one, and its own authoring blocks appear: Data, Fields and Filters in the data bar on its top edge, the Number card at its left with Value, Comparison and Sparkline, and the folded Block card under it with Block size and Code.
- Add a scorecard from the palette. If the dashboard has several datasources, pick one in the Data block.
- Pick the field in the body of the scorecard. Measures are first in the list.
- Open the Value block to change the field, the reducer (Summarize by — sum, mean, min, max, count, distinct, last, or first; distinct counts each value once), the number format, and where the status color shows.
- In the Comparison block, turn on Compare for a delta line: against an earlier period of a date column, a target number, or a second column.
- In the Sparkline block, turn on Show trend and pick the column under Trend over. On a date column, set Granularity — Auto, or a calendar unit from day to year. Pick the Style: Line, Bars, or Area.
If the number is a ratio, such as revenue per order or a conversion rate, define a measure on the datasource and pick it. Measures are first in the Field picker. A measure carries its own formula, so the reducer does not apply. The label and the format of the number come from the metadata of the field. The Number format row in the Value block overrides them. The Data block holds the datasource, and the Filters block holds the scorecard's own filters.
Make a table
- Add a table from the palette. A fresh table shows every column of its datasource.
- To group the rows, add a field under Rows and a number under Values. Each value carries its own reducer, so one table shows a sum beside an average. In the value's picker, the buttons on a column's row set the field and the reducer in one click.
- To spread the values across the top as a crosstab, add a field under Columns. You can add up to two fields. A crosstab reads best with one value per cell, because each extra value repeats under every column key. The Columns group says so.
- If Rows and Values are empty, the table shows the rows of its datasource. Then use Columns shown to hide, reorder, and configure each column: alignment, format, what the cell shows, and a footer reducer.
- To set a column's width, drag the right edge of its header. Double-click the edge to make the width automatic again. Columns without a set width share the remaining space.
-
To turn a column's values into links or pictures, set its cell to a link or picture cell.
The Address field takes a template whose
{column}placeholders read the values of that row. If the field is empty, the value of the cell is the address. - Add format rules in the Format section. Add rule colors the cells, or whole rows, that match a condition. Add scale colors a numeric column on a color scale, and Add bar shows a bar beside each number. Each new rule is complete and applies at once. On a column with both positive and negative values, a scale divides at zero, so positive and negative values show apart with no setting.
- Turn on the totals you need in Totals: subtotal rows, a total row, and a total column. Each total calculates from the rows of its own group, and not from the cells above it. A total over an average or a measure therefore does not equal the sum of those cells. When a total is on, the group says so and names the values it affects.
Table options holds the sort, the page size, Wrap long text, and Keep first columns in place. On each folded group, you see the names of its settings, so you can read the whole table setup without opening a group.
Arrange the canvas
- Move — drag a block by its header. Positions snap to the grid of the dashboard.
- Align — while you drag, the edges and centers of the block snap to those of other blocks within 8 screen pixels. A thin guideline marks each match. Alignment to a block takes priority over the grid.
- Resize — point at a block or select it, then drag a corner square or a side. When you drag the top or left side, the block moves, and the opposite side stays in place. The edge you drag snaps to the edges of other blocks, then to the grid. To resize without a drag, type its Width and Height in canvas pixels: on a chart or a scorecard in the Block size block, and on any other block in the Size group of the form that its Settings button opens. The top-left corner stays in place.
- Select several — Shift+click adds a block, Shift+drag on empty canvas sweeps a selection rectangle, and ⌘/Ctrl A selects every block. A section joins the rectangle's selection only when the rectangle encloses the whole section, so a sweep inside a section selects its blocks without the section. A drag on any selected header moves the whole set as one undo step.
- Nudge — arrow keys move the selection one grid step, Shift+arrows five.
- Duplicate and delete — ⌘/Ctrl D duplicates, the Delete key deletes, and both are also in the ⋯ menu of the block. A delete does not ask first. A notice names the block and the undo key.
- Paint order — where blocks overlap, Bring to front and Send to back in the ⋯ menu reorder them.
- Sections — the title chip of a section is its handle. Drag the chip, and the blocks of the section move with it. Drag a block in or out to change membership. Clicks go through the body of a section, so only the chip or the border selects it. A control can apply to one section only, and then filters the data blocks of that section.
- Connectors — a connector points from one block to another and follows them as they move. Click its line to select the connector, and press Delete to remove it. Add a new connector in the Source panel.
Make pages with frames
A frame is a named sheet on the canvas. A reader can switch from the canvas to Pages and read one frame at a time, as one page of a report.
To select a frame, click its name or its border. A click inside the frame selects the block under the pointer. To open the frame's form, select the frame, then select Settings beside its name. The form opens beside the frame.
Do these steps one time for each page:
- In edit mode, select Add in the header, then Frame. A 16:9 frame named New frame appears at the center of the view, behind the other blocks. A new frame takes no block: a block that it covers stays on no frame.
- Drag the frame by its name to an empty part of the canvas, so that it does not cover another frame.
- Double-click the name above the frame, type the name of the page, and press Enter. The name is also the title of the page tab.
- Drag each block onto the frame. A block belongs to the frame when its center is on the frame. A section brings its blocks with it.
- To change the shape, open the frame's form, then select 16:9, 4:3, or A4. You can also drag a corner or a side of the selected frame.
The pages follow the order in which you added the frames. To move a page, open its frame's form, then select Move earlier or Move later.
To see the pages as a reader sees them:
- Set the mode switch in the header to View.
- Select Pages in the Canvas | Pages switch over the top of the canvas. Each frame is a tab, in page order.
- Open Findings on the right icon rail. Findings names each block that is on no frame. A block on no frame does not show in the pages. Drag each such block onto a frame.
A reader opens the dashboard on the canvas, and on a phone on its pages (Read a dashboard page by page).
-
Drag a frame by its name, and its blocks move with it. A frame that you move over a block
does not take that block.
The blocks on a frame move with it. - Delete a frame, and its blocks stay on the canvas. Duplicate a frame, and its blocks are copied with it.
- Hide from the page view takes a frame out of the pages. The canvas shows it, faded. A hidden frame is not private: every reader of the dashboard sees it on the canvas.
- Present, in the page view, shows the pages fullscreen and fits the whole frame on the screen. A long or wide frame shows smaller there, and its name carries the tag Shrinks in Present.
Undo and redo
⌘/Ctrl Z undoes, ⌘/Ctrl ⇧ Z redoes. One gesture is one step: a whole drag, a whole text edit, a burst of nudges. When another person or an agent edits the same dashboard, your undo does not reverse their work. If their edit replaced what an undo step would change, the app skips that step, and a notice says so. Inside a text field, the keys undo and redo the text of that field.
When someone else changes the dashboard
Another editor, an agent or the scheduled refresh can change the dashboard while you have it open. The dashboard takes the change in place, and your own unsaved edits stay. A notice names who changed what, for example "[email protected] changed 2 charts and the title." The changed blocks light up for a moment. To see them again, select Show changes in the notice.
While an agent works, the header shows Agent editing, and the blocks that the agent changed have a dashed outline. When the agent stops, one notice names all of its changes. If the change came from your own agent or from your own other tab, the notice also has Undo. Undo takes back only the parts of that change, and the dashboard saves the result. To undo the work of another person, restore an earlier version in Version history on the icon rail.
The label beside the title can read Catching up… for a moment. Someone else saved just before you, and the app joins your edits to theirs before it saves.
Put your edits back after a collision
A collision is when you and someone else changed the same part of the dashboard: the same block, datasource, param, title or theme. The dashboard then shows their version of that part. Before it does, the app keeps a copy of your whole dashboard in version history, labelled Set aside. A notice names the part and stays until you close it.
- To see your version, select Compare in the notice. Your copy opens read-only. The outlined blocks are different from the dashboard now, and the banner names the other parts that are different.
- To take back your version of the parts that collided, select Put mine back. The rest of the dashboard stays as it is.
- To go back to the dashboard without a change, select Back to current.
After Put mine back, a notice names the parts that came back. The other version stays in version history. To take back the whole copy instead, open Version history, select the Set aside row, and select Restore this version. A set-aside copy stays in the history for 30 days.
If you see a notice that the app could not keep a copy of your edits, do nothing. Your screen stays as it is, your edits stay in this browser, and the app tries again in a moment.
Write and decorate
Notes
To write in a note, double-click its body, or select the note and press Enter. The text is
markdown: headings, lists, tables, quotes, code, links, and pictures with
. The note saves as you type. Escape closes the editor
and keeps the text. Markdown that the app cannot draw stays as plain text.
Images
An image block without an address shows its own form. Paste the address into Image URL and select Set image. If the picture does not load, the form shows again, with the address kept and the error named.
Describe a chart or an image in words
A reader who uses a screen reader cannot see a chart or an image. Write what it shows, and the screen reader reads your words after the block's title. The same text, followed by the generated summary, goes with the chart's picture in a Slack delivery.
- For a chart, select it and open its Title block. For a sankey or an image block, select Settings in its header.
- In Text description, write the finding in a sentence or two: "Signups doubled over the quarter, with a dip in the week of the outage."
The field takes up to 1,000 characters, and a count under it shows how many are left. Keep it under 250, because a screen reader reads all of it before the reader can move on. When an image carries no information, such as a divider or a background, select This image is decorative instead, and a screen reader skips it.
On a chart or a sankey, arkush also writes a short summary from the data, such as the largest value or the trend, and a screen reader reads it after your description. The form shows that summary under the field. Read it before you write, and add what the data cannot say: why the numbers moved, or what the reader should do. arkush never puts the summary in the field.
Block titles
To rename a block, double-click its title or press F2. If the title is blank, the block shows its id. The form of a chart adds the Title choice: in the header, drawn on the chart itself, or hidden. On other block types, only the Source panel hides a title.
Write up a finding in an article
An article is text beside the canvas, with charts placed in it. Each chart in an article keeps the filters you set when you placed it, so a reader sees your finding without setting the filters. You need edit access to the dashboard.
- On the canvas, set the filters and the chart options that show the finding.
- Open Articles on the right icon rail and select Write an article. You can also select Article in the header's Add menu, which also places a card for the article on the canvas.
- Type the title and the text. The text is markdown, like a note.
- Put the cursor where the chart goes. In Add a chart, pick the chart.
- Select Done to read the article as a reader sees it.
The chart appears in the text with the filters from the canvas. The Views list names each chart and what it keeps. To change what a chart keeps, set the filters on the canvas again, then select Record again on that row.
When the data under an article changes, the article shows a notice that the text may no longer match the charts. Read the text again and correct it, then select Mark as current. A refresh that returns the same rows shows no notice.
Edit the JSON where the form ends
Open the Source panel from the right icon rail, or press ⌘/Ctrl J. The panel shows the whole dashboard as JSON, and follows the canvas until you type. Your typed edits wait for Apply. Apply checks them first: if the JSON is not valid, or the dashboard would be broken, the panel shows the error and changes nothing. Revert discards your typed edits.
For one block, each block form has Edit as JSON at its foot: the same block as raw JSON, and Apply works the same way. A note's form holds its text as markdown, and the note changes as you type. Composite chart, shape, section, and connector blocks have no form. Their Settings button opens the JSON of the block. A chart that its blocks edit, and a scorecard, have no form and no Settings button. A scorecard's Code block opens its JSON.
Edit the spec of a chart
The spec of a chart is its Vega-Lite JSON. You edit it in the code pane of the Chart workspace, a full-window view of one chart. You need edit access to the dashboard. Without it, the code pane reads Read-only and takes no typing. To get edit access, ask the owner of the dashboard.
Leave data, width, height and config out
of the spec. The save drops width, height and config,
because the canvas sets the size and the theme. A spec with its own data draws
that data in place of the rows of its datasource.
Every chart in edit mode opens in the Chart workspace from the ⋯ menu in its block header, the title row at the top of the chart: select Open in Chart workspace. A composite chart has a spec that puts several views together, such as layers, facets, repeats, or side-by-side views. It shows no authoring blocks, the cards of settings around a selected chart, so the ⋯ menu is its way in.
An edit that layers a chart beyond labels and reference lines makes it composite, and its authoring blocks close. To get them back, take the edit back with undo.
To open any other chart with the cursor already in the code, the way this task does it:
- Select the chart.
- At the left of the chart, select the name Chart to unfold the Chart card.
- Select Code in the Chart card. Its popover opens.
- In the popover, select Edit spec. The chart opens in the Chart workspace, with the cursor in the code pane at the right.
- Type your change in the code pane. The chart redraws a moment after you stop typing. After a longer pause, the code pane saves the change to the dashboard, and the save state in the bar at the top changes from Unsaved changes to Saved.
- To go back to the dashboard, select ‹ Canvas at the left of the bar at the top. A change that is waiting for its save saves as you go.
The code pane saves by itself, and it has no Apply. While the JSON does not parse, nothing saves. You see the chart's last good version, dimmed, and under the chart, a line with the line number and the column of the problem. Correct the JSON in the code pane at that line and column. When it parses again, the chart is no longer dimmed, the line goes, and the change saves.
If you go back to the canvas before you correct it, the text you typed after the last good version is lost. A notice says that the code was not saved, and the chart keeps the last code that parsed. To change it, open the chart in the Chart workspace again.
A change can parse and still draw nothing, for example a misspelled mark type. That change saves, and the chart shows a message that names the problem. In the code pane, ⌘Z (Ctrl Z on Windows) takes back your typing. To take back a change that already saved, go back to the canvas and use undo, or put back an earlier version from Version history.
The code pane completes Vega-Lite property names and values from the schema. Where the spec
names a column, in a field or a groupby value, it completes the
columns of the chart's datasource, each labeled with its field type. Put the pointer on such
a column name and keep it there. A peek opens with the type and the profile of the column,
the same line that the Data workspace and the field pickers show. A name that is not a
column of the datasource, such as a column that a transform calculates, opens no peek.
A formula is the text of a calculate, filter, test,
or expr value, and it gets help of its own. Type datum. to get the
list of columns. Where a name starts, the code pane completes the functions of the Vega
expression language. Inside a function call, it shows the arguments of the function. A
formula that does not parse gets a red underline, with the reason.
The code pane lays the spec out compactly: an array or an object stays on one line until the line is longer than 80 characters. Each paste lays out the whole spec again. To lay it out on demand, press Shift+Alt+F (Shift+Option+F on a Mac). A spec that does not parse stays as you typed it.
Above the spec, the code pane lists the warnings from Vega-Lite at the last draw of the chart. A sort that a layer drops is an example. A chart that draws cleanly lists nothing.
Some settings exist only in the JSON: a chart spec layered by hand, selections and custom transforms, composite charts, connectors, the thresholds and value mappings of a field, and each detailed setting that a form names as JSON-only. What needs the Source panel or an agent has the current list.
The Source panel edits the same JSON that an agent edits, and everything on the canvas is in that JSON. When hand edits become slow, connect an agent and describe the change instead.