Embed Individual Images - Embedabble BI Embedded BI is the integration of BI solutions within business process software. Instead of using a standalone application, embedded BI enables business intelligence directly within an organization's application.

Embedded BI provides critical to day-to-day operations and long-term strategic planning by providing actionable insights into the same environment as other business applications.

Embedded BI should include the ability to embed more than only dashboards.

While useful in many cases, embedding entire dashboards runs the risk of missing key takeaways from the dashboard consumer's data. End-users may skim over a dashboard, missing the aggregate key points, or misinterpret a visualization. Embedded BI should always offer the flexibility to embed individual visualizations as their own entity in a business application, such as an individual KPI (single Scenario integration).

Wyn Enterprise already provides the capability to embed the entire document (dashboard and report). With the release of Wyn Enterprise 4.1, we can now embed individual scenarios/visualizations from a complete dashboard.

Integrate a Single Scenario

In this article we'll explore the ability to integrate a single scenario. Here's a glimpse of what we can achieve by embedding individual scenarios from the complete dashboard. The 'Gross Profit Margin,' 'Operating Profit,' and 'Monthly Sales' are all individual scenarios from an existing dashboard.

Embed Individual Images - Embedabble BI

Generate Scenario URL in Application

The basic concept involved in integrating a single scenario into a business application is to generate the URL for the scenario with the required options and set it as the source of an iframe. It is similar to embedding an entire dashboard into an application, but the URL will have an additional parameter 'scenario' where the name of the visualization is passed in as its value.

URL:

http://<WynServerUrl>/dashboards/view/<DashboardID>?scenario=<ScenarioName>

Once the URL is created, we can set it as the source of an iframe.

<iframe className="dashboard-preview" title="Scenario View" src={scenarioUrl} />

For the purpose of this article, we'll be working with a reactjs application. The Server URL, Token and the Dashboard ID are stored in the state object of the App component.

export default class App extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            token: '61keii49qdakj031k9e1h9ann0s8e08qhlk741nkjkl22n2asdf983yi2bsi3bdn', //Token generated from Wyn Server
            serverURL: 'http://localhost:51980', //Wyn Server Url
            dashboardID: '28ack2s2-9cc9-2h8s-j9l1-ois2nai4la32', //ID of the Dashboard containing the KPI/Visualization
            docTitle: 'Retail Sales Analysis',           
            scenarioURL: '',
            selectedStore: null,
            selectedRegion: 'All'
        };
}

To create the scenario URL, I've added a function which will combine the values of the variables stored in the state object and return the URL with the specified scenario name.

generateScenarioUrl = (scenarioName) => {
        let url = "";
        url = `/dashboards/view/${this.state.dashboardID}?token=${this.state.token}&scenario=${scenarioName}&size=fittoscreen&actions=clearselection&openfulldashboardmode=newwindow`;
        return url;
}

The scenario name can be found from the Dashboard in Edit mode from the Inspector panel on the right.

Embed Individual Images - Embedabble BI

Generate Scenario URL through Wyn Portal

Although you can generate the scenario URL within your application itself as shown above, Wyn Enterprise also gives you the ability to generate it through the Portal in two simple steps:

1. Edit Dashboard

Click the 'More...' button on the Dashboard where the visualization/KPI you wish to embed exists and select Edit Dashboard.

Embed Individual Images - Embedabble BI

2. Get Scenario Markup

Select the scenario/visualization that you wish to embed and click on the 'Share Scenario' option at the top right corner. From the popup you can select/deselect options you wish to include/exclude and click the 'Copy Options' button to copy the markup.

Embed Individual Images - Embedabble BI

You can now embed the copied iframe markup in your application. The markup contains all the required parameters (server URL, token, dashboard id and scenario name) along with options such as size and analysis path, etc.

Download Sample

Running the sample

To run the attached sample, follow these steps:

  1. Open the command prompt for the sample location and run the following command:
    npm install
  2. Now execute the following command to run the application:
    npm run start

Note: You must have nodejs installed before executing the above commands.


Understand the Story Behind Your Data

Wyn is a web-based BI and data analytics platform that provides greater insight into your data.

Wyn offers built-in tools for report and dashboard creation, data governance, security integration, embedded BI, automated document distribution, and a business-user friendly interface for self-service business intelligence.

Test drive on your own data with our free evaluation.

You can also request a personalized demo to address your individual BI needs.

Take Tour of Wyn Enterprise

Watch an in-depth demo of Wyn, learn about our user portals, and create a report in seconds.

Watch Video