Automated Demos in CanvasXpress

Introduction

A demo video of a visualization tool is normally a person clicking through the interface while a screen recorder runs. The demo storyboard automates the clicking. You describe what to do in plain steps — { toolbar: "customize" }, { dragDrop: { field: "Group", to: "Color" } }, { lasso: { group: "C" } } — and CanvasXpress performs them like a person would: a ghost cursor glides to each control, the pointer presses, the widget responds, and captions explain what is happening.

The three live demos below run on this page. Press Play and watch; nothing starts by itself. Each demo drives the real toolbar, context menus, Customizer, data table and data filters — there is no separate “demo mode” of the chart.

How It Works

Demo 1 — Menus, Customizer, Data Table and Filters

A bar chart of twelve samples. The demo opens the context menu and walks a nested submenu to group the samples, switches Customizer tabs and hides the legend, opens the data table and sorts a column from its header menu, stripes and transposes the table, opens the data filters and filters out a treatment — closing each widget with its own close control.

Demo 2 — Drag and Drop, Lasso, Legend and Zoom

A scatter plot that starts with every point the same. The demo opens the Customizer Shelves, drags the Group field onto Color and Shape and a numeric Score field onto Size — with the drag ghost and the grabbing cursor of a real drag — then draws an irregular lasso around one cluster, hovers a point for its tooltip, toggles a group from the legend, rubber-band zooms into a region and finishes with the toolbar Reset.

Demo 3 — Boxplots into Violins, with Paired Points Connected

Twelve patients measured at three visits, drawn as boxplots with their individual points. The demo turns the boxes into violins from the Customizer Plot tab, drags the Patient annotation onto Connect so each patient's points are joined across the visits, and then uses a four-level context menu (Customize › Boxplot › Violin Attributes › Show Boxplot) to put the box back inside each violin.

Using It

Give a chart a demo array and call playDemo (or set demoAutoPlay to start it once after the first render). Every step is an object with one verb:

var chart = new CanvasXpress("canvasId", data, {
  graphType: "Scatter2D",
  showToolbar: true,
  demoAutoPlay: false,          // play only when asked
  demoSpeed: 1,                 // 1 = human pace, 2 = twice as fast
  demo: [
    { caption: "Group the points by a Customizer drag and drop", ms: 2400 },
    { toolbar: "customize" },
    { customizer: "shelves" },
    { dragDrop: { field: "Group", to: "Color" } },
    { close: "customizer" }
  ]
});

chart.playDemo(chart.demo, { speed: 1, onDone: function (log) { /* log lists any step that failed */ } });

var recording = chart.demoRecording();   // the native, replayable actions the chart recorded
chart.replayDemo({ widget: true });      // replay them through the Workflow widget

Verbs

Recording a Video

1. Open the page with the chart, start your screen recorder (QuickTime, OBS, the browser's own recorder) on the browser window.
2. Press Play — or call chart.playDemo(chart.demo). The ghost cursor, click ripples and captions are part of the page, so they are captured.
3. Use demoSpeed (or the speed option) to pace the take: 0.7 is slower for narration, 2 is a quick teaser.

A step that cannot find its target (a control that is not on screen) is reported in the log passed to onDone instead of failing silently, so a storyboard can be checked without watching it.

Scope and Limits

• Nothing runs unless a demo is configured or playDemo is called; charts without one render exactly as before.
• Browser-owned dialogs — the file chooser, print and save dialogs — cannot be driven; the file verb sets a file on the input without opening the chooser.
• The demo drives the visible page, so a control hidden behind another element cannot be reached (the log says so).
• The Workflow replay reproduces what the chart recorded; widgets that do not record their actions (for example a pure scroll) are shown live but not replayed.