Share & Embed
Every visualization in ONA Visual Lab has a stable URL. Share a direct link, present a live Cockpit to a client, or embed a graph inside any HTML page.
1 · Share a direct link
Link to a specific VizSpec in the Lab
Append ?viz=VIZ_ID to the Lab URL.
The graph loads with that VizSpec pre-selected — no manual switching needed.
If you have multiple VizSpecs, the Lab's dropdown selector lets the viewer switch
between them. To limit the view to a single VizSpec with no switcher,
set shell.panels to exclude the switcher
(the dropdown only appears when more than one VizSpec is available for the dataset).
Link to a Cockpit
Use the Cockpit viewer URL with the cockpit ID:
This is the URL to send to clients and stakeholders. The Cockpit viewer is fully read-only — no editing UI is exposed. Cross-panel node selection is active automatically.
id parameter is provided, cockpit.php loads
cockpit-demo.json by default. Rename or replace that file
to set your own default landing cockpit.
2 · Embed a graph in an external page
Any Lab view can be embedded in an HTML page using an <iframe>.
The embed pattern requires one preparation step: configuring the VizSpec for
kiosk mode by hiding the topbar and sidebar.
Step 1 — Configure the VizSpec for embed
In the VizSpec Editor, open the Shell section and:
- Uncheck Topbar — hides the navigation bar
- Uncheck Sidebar collapsible — optional; controls the collapse button
- Set Visible panels to only what the embed needs (e.g., just Legend, or none at all for a pure graph embed)
Save this as a dedicated embed VizSpec (e.g., viz-embed-dept.json).
Step 2 — Add the iframe to your page
Use the Lab URL with your embed VizSpec ID as the src:
The graph loads fully interactive inside the iframe — hover tooltips, node selection, color and size controls all work. Only the topbar and the panels you disabled are hidden.
Minimal embed (no sidebar)
For a pure graph display with no sidebar, you can additionally style the
<iframe> at full screen and use a VizSpec with
shell.topbar: false and a minimal panel set. See the
Minimal Embed example for
a working 20-line integration pattern.
3 · Embed examples
The Embedding Examples section on the home page contains four ready-to-run patterns:
| Example | What it shows | Good for |
|---|---|---|
| Minimal Embed | Hardcoded VizSpec, 20-line integration | Quickest possible embed in any HTML page |
| API-Fetched VizSpec | Spec loaded from the API with a live switcher | Dynamic embeds where the host page controls which viz to show |
| 2-Panel Dashboard | Two graphs side-by-side with cross-filter | Dashboard integration with comparative analysis |
| Config Playground | Every VizSpec option with live preview and JSON output | Exploring what each field does before writing a VizSpec |
URL reference
| What you want to share | URL pattern |
|---|---|
| Lab with default VizSpec | lab.php |
| Lab with a specific VizSpec | lab.php?viz=viz-{id} |
| Cockpit (default) | cockpit.php |
| Cockpit (specific) | cockpit.php?id=cockpit-{id} |
| VizSpec Editor (blank) | compose/vizspec/ |
| VizSpec Editor (pre-loaded) | compose/vizspec/?viz=viz-{id} |
| Cockpit Editor (blank) | compose/cockpit/ |
| Cockpit Editor (pre-loaded) | compose/cockpit/?cockpit=cockpit-{id} |
https://your-host/.../cockpit.php?id=cockpit-demo).
The Lab and Cockpit viewer pages have no access control — any user with the link can view.