LiteViewer requires the following resources:

1. polyfills.js // this file is not part of viewer lite. It provides some polyfills on global. 
2. dashboard.viewerLite.css
3. dashboard.viewerLite.vendor.css
4. dashboard.viewerLite.js
5. dashboard.viewerLite.sheet.js
6. dashboard.viewerLite.chart.js

These resources can be referenced locally or through Wyn Dashboards API as below:

The LiteViewer's API is pretty simple and can be set up within no time. An instance of LiteViewer can be created using the WynDashboards.createViewerLite() function.

const liteViewer = WynDashboards.createViewerLite({
dashboardId: 'xxxxxxxxxxxxxxxx', // Dashboard Guid
token: 'xxxxxxxxxxxxxxxx', // Access token
baseUrl: 'xxxxxxxx', // Wyn Server Url
lng: 'en-us', // Language
dp: '',
theme: 'default' // options: custom theme should work with correct css file
});
 
// Destroy the instance if needed
liteViewer.destroy();

Once the LiteViewer has been created, we can integrate Dashboards using its initialize API. LiteViewer provides three methods to integrate Dashboards in your application:

• Integrate full Dashboard
• Integrate single Page
• Integrate individual Chart/Visualization

The LiteViewer requires two DOM elements - one as a container for the LiteViewer itself and the other to act as a container for the Dashboard.

<main id="root">
  <div id="dashboard-root">
  </div>
</main>

We can integrate an entire Dashboard in LiteViewer using the following method:

const viewerRoot = document.querySelector('#root');
 
liteViewer.initialize({ container: viewerRoot, }).then((uiDashboard) => {
    const dashboardDom = document.querySelector('#dashboard-root');
    uiDashboard.connect(dashboardDom); // mount the dashboard onto this dom
 
    // listen to the event if you need
    uiDashboard.on('render', () => {
        console.log('>>>', uiDashboard.name, 'uiDashboard render start');
    });
    uiDashboard.on('rendered', () => {
        console.log('>>>', uiDashboard.name, 'uiDashboard render end');
    });
    uiDashboard.on('mounted', () => {
        console.log('>>>', uiDashboard.name, 'uiDashboard mounted');
    });
    // trigger dashboard render
    uiDashboard.refresh();
});

The LiteViewer provides the feature to integrate a single page out of a Dashboard with multiple pages to focus on one topic/area of the Dashboard.

const viewerRoot = document.querySelector('#root');
 
liteViewer.initialize({ container: viewerRoot, }).then((uiDashboard) => {
    const firstPage = uiDashboard.pages[0]; // UIPage
    const pageDom = document.querySelector('#dashboard-root');
    firstPage.connect(pageDom);
 
    firstPage.on('render', () => {
        console.log('>>>', firstPage.name, 'page render start')
    });
    firstPage.on('rendered', () => {
        console.log('>>>', firstPage.name, 'page render end')
    });
    firstPage.on('mounted', () => {
        console.log('>>>', firstPage.name, 'page mounted')
    });
    firstPage.refresh();
});

We can even integrate an individual Chart/Visualization using the LiteViewer with ease to focus on a particular Chart or KPI.

const viewerRoot = document.querySelector('#root');
 
liteViewer.initialize({ container: viewerRoot, }).then((uiDashboard) => {
    const firstPage = uiDashboard.pages[0];
    const firstScenario = firstPage.widgets[0]; // UIScenario or UIContainer
    const scenarioDom = document.querySelector('#dashboard-root');
    firstScenario.connect(scenarioDom);
 
    firstScenario.on('render', () => {
        console.log('>>>', firstScenario.name, ' scenario render start')
    });
    firstScenario.on('rendered', () => {
        console.log('>>>', firstScenario.name, ' scenario render end')
    });
    firstScenario.on('mounted', () => {
        console.log('>>>', firstScenario.name, ' scenario mounted')
    });
    firstScenario.on('update', () => {
        console.log('>>>', firstScenario.name, ' scenario update')
    });
    firstScenario.refresh();
 });

With embedded business intelligence dashboards, you can analyze data and deliver actionable information with interactive dashboards, multi-dimensional dynamic analysis, and intelligent drilling.

If you are vetting embedded BI solutions, take a look at Wyn Enterprise and our interactive dashboard and BI report gallery.

You can schedule a demo here to speak with a Wyn expert to address your specific BI requirements.