arkushHelp

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:

  1. Upload a file — opens the file picker and imports the picked file. This step leads.
  2. Connect BigQuery — opens the Data workspace on a new BigQuery datasource. The step shows when you can run BigQuery: sign in first.
  3. 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.
  4. 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 'Start your dashboard' walk on an empty dashboard: Upload a file leading, then Connect BigQuery and Connect an AI agent, and 'Load the sample dashboard' beneath.
The empty canvas leads with data. Make a chart shows after a datasource has rows.

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.

  1. On the Charts page, select New chart. On the landing page, select Try it without an account.
  2. 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.

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.

  1. On the chart, select ⋯, then Copy to its own dashboard. The Chart workspace also has this button.
  2. 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.

  1. To add a chart, select Chart.
  2. 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.

The Chart button and the Add menu in the edit-mode header. The open menu lists the block types in three groups — Data, Content, and Layout — each type with one line that says what it is.
The block palette in the edit-mode header, with the Add menu open.
Add a note: the new block appears at the center of the view.

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:

Each authoring block shows its current setting, and opens one popover with the controls for that setting.

A selected line chart, Sessions by week, with its authoring blocks around it, five parts marked with numbers. 1 marks the data bar above the chart: Data weekly, Fields 5 columns, Filters off. 2 marks the Marks card at the left: Line in its header, the rows Color channel and Tooltip off, and a line that offers Size, Detail, Path and Labels. 3 marks the folded Chart card under it. 4 marks the X block, week, under the chart. The Y block, sessions, is at the right of the chart. 5 marks the open Color popover with the field, its type, the aggregate, and the Legend group.
A selected chart: (1) the data bar, (2) the Marks card, (3) the Chart card, folded, (4) the X block, with the Y block at the right of the chart, (5) the popover of the open block.
  1. 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.
  2. 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.
  3. 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.
  4. To bind a field by drag, open Fields in the data bar. Drag a field from its list onto a channel block.
  5. To change the mark and its settings, open the mark in the header of the Marks card.
  6. To sort a category axis, use the popover of that channel.
  7. 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.
  8. 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.
  9. Set the tooltip in Tooltip in the Marks card: Off, Chart fields, or a custom field list.
  10. To draw the series over an earlier period too, open Comparison in the Chart card and turn on Compare periods.
  11. 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.
Drag a field from the Fields block onto a channel block.

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.

The authoring blocks of a selected scorecard, Weekly conversions: the data bar above it with Data, Fields and Filters, and at its left the Number card with Value, Comparison and Sparkline, and the folded Block card. The Value popover is open with Field, Summarize by, Number format, and Color shows on.
The Value block of a selected scorecard, with its popover open.
  1. Add a scorecard from the palette. If the dashboard has several datasources, pick one in the Data block.
  2. Pick the field in the body of the scorecard. Measures are first in the list.
  3. 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.
  4. 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.
  5. 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.
The Comparison block sets how the delta line reads. The scorecard changes at once.

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

  1. Add a table from the palette. A fresh table shows every column of its datasource.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
The table Top campaigns, with its form opened by Settings in the table's header. The form is a panel over the right part of the table, titled Block — Top campaigns: Datasource, then the Rows, Values, and Columns groups, each empty with its Add button, then Columns shown with all six columns checked, and Table options folded at the foot.
The form of a selected table. With Rows and Values empty, the table shows the rows of its datasource.
Drag the edge of a column header to set its width. Double-click the edge to make it automatic again.

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 a block, and a guideline shows where its edge meets another block. Drag a corner or a side to resize.
A Shift+drag inside a section selects its blocks without the section. One drag moves the whole selection.

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:

  1. 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.
  2. Drag the frame by its name to an empty part of the canvas, so that it does not cover another frame.
  3. 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.
  4. 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.
  5. 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 frame named Customers, selected on the canvas with a scorecard and a note on it, and Settings beside its name. Its form, open beside the frame, holds Hide from the page view, Shape with 16:9, 4:3, and A4, Page order with Page 2 of 2 and the Move earlier and Move later buttons, and Size.
A selected frame and its form: the shape and the place of its page.

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:

  1. Set the mode switch in the header to View.
  2. Select Pages in the Canvas | Pages switch over the top of the canvas. Each frame is a tab, in page order.
  3. 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).

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.

A delete does not ask first. ⌘/Ctrl Z brings the block back.

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.

  1. 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.
  2. To take back your version of the parts that collided, select Put mine back. The rest of the dashboard stays as it is.
  3. 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 ![description](address). The note saves as you type. Escape closes the editor and keeps the text. Markdown that the app cannot draw stays as plain text.

Double-click a note to write markdown. Escape draws it.

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.

A new image block named New image. Its body holds the Image URL field, empty, with the hint 'Paste a link to a PNG, JPG or SVG', and the Set image button.
A new image block shows its form until it has an address.

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.

  1. For a chart, select it and open its Title block. For a sankey or an image block, select Settings in its header.
  2. 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.

  1. On the canvas, set the filters and the chart options that show the finding.
  2. 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.
  3. Type the title and the text. The text is markdown, like a note.
  4. Put the cursor where the chart goes. In Add a chart, pick the chart.
  5. Select Done to read the article as a reader sees it.
The article editor. The Title field holds 'Organic leads the quarter'. The Text field holds one sentence, then a line that places the chart Sessions by week. Under it are Add a chart, the Views list with the row for Sessions by week and its Record again and Remove buttons, then Add a card to the canvas and Delete article.
The article editor. Each chart you place is one line in the text and one row in Views.

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.

The Source panel: the whole dashboard as JSON — meta with its shares, then the datasources — with Revert and Apply at the top.
The Source panel: the same dashboard the canvas draws, as JSON. Apply checks the JSON before anything changes.

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:

  1. Select the chart.
  2. At the left of the chart, select the name Chart to unfold the Chart card.
  3. Select Code in the Chart card. Its popover opens.
  4. In the popover, select Edit spec. The chart opens in the Chart workspace, with the cursor in the code pane at the right.
  5. 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.
  6. 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 chart redraws a moment after you stop typing, and the code pane saves the change.

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.