Embedded Data Discovery Visual Authoring JavaScript Example

This applies to: Visual Data Discovery

The following JavaScript example uses methods, properties, and embedded events of the EmbedManager class to embed a visual authoring instance.

The Symphony EmbedManager class must be made available to your HTML application prior to using this sample in your application. See Embed Symphony Components Using JavaScript and Trusted Access.

Symphony provides a componentInstanceId provides a as part of event details for dashboard, source, and visual events.

// NOTE: This example assumes that the EmbedManager has already been initialized
const visualBuilder = await embedManager.createComponent('visual-builder', {
    visualId: <id>, // ID of existing visual
    source: {
        "visualId": "<id>", // ID of visual template, used for creating a new visual, do not pass it with visualId
    },
// If neither visualId is passed (visualId or source.visualId) an empty visual builder will be opened)
    "theme": "composer",
    "header": {
        "visible": true,
        "showTitle": true,
        "showActions": false, // hides the visual actions bar
        "title": "Static custom title"
    },
    "breadcrumbs": { // optional configuration of the breadcrumbs
        "title": "Visuals",
        "onClick": () => {console.log('clicked')},
        "href": "http://www.google.com",
        "target": "_blank"
    },
    interactivityOverrides: { // optional overrides for visual interactivity
        "visualSettings": {
            "FILTER": false,
            "GROUPING": true,
            "METRICS": false, // accept both boolean and string values
            "SETTINGS": false,
            "SORT": true,
            "ZOOM_ACTION": false
        }
    }
});

visualBuilder.render(document.querySelector('#builder'), { width: '800px', height: '100px' });