Embedded BI Features with Kyubit

Embedded BI features

How to embed analytics, dashboards, and related business intelligence features with your website/application and utilize self-service analytics, data visualizations, and metrics created with the Kyubit BI platform within your existing website or application.

Embedded Analytics

Embed Analytics grid view into an existing application or a website with all analytic features included with a simple URL definition. Easy setup of the self-service analytics that empowers your users to explore data from the host application or a website. The analysis grid could be embedded inside an IFrame HTML element inside an existing page or opened in a separate browser tab. An embedded analysis grid view can display an existing analysis (previously created in the application) or a new analysis for a specific data source. Example:

//Embed a new analysis for a data source ID = 101
http://YourKyubitSiteURL/Analysis/New?DataSourceID=101

//Embed an existing analysis with AnalysisID = 10
http://YourKyubitSiteURL/Analysis/10

//Embed an existing analysis with AnalysisID = 10 with hidden elements
http://YourKyubitSiteURL/Analysis/10?hideHeader=1&hideHomeLink=1&hideSave=1

//Embed an existing analysis inside Iframe element
<iframe src="http://YourKyubitSiteURL/Analysis/10" width="1600px" 
 height="1000px" frameborder="0" scrolling="no"></iframe>

Embed Dashboard Page

Provide an interactive business dashboard for users to observe and explore important data hosted within your application or website. To embed an existing dashboard to an external page using IFrame element or to open in a separate browser tab use Dashboard > Options > Embed form to create the required URL that will also include preferred visual options to nicely integrate into the existing application/website page layout. Define filters for the dashboard in the URL as described in the dashboard filters section. Example:

<iframe id="dashFrame" 
    src="http://YourKyubitSiteURL/Forms/Dashboard.aspx
    ?DashboardID=3027
    &@country=Canada;Australia
    &align=right&font=helvetica
    &fontColor=red&tileFontSize=11px
    &hideDesignButton=1&hideCloseButton=1
    &hideOpenPDFbutton=1&hideSubscribeButton=1" 
    width="1600px"
    height="1000px" 
    frameborder="0" 
    scrolling="no">
</iframe>

Embed Report/Decomposition

A report View or a decomposition Analysis could also be embedded using the IFrame element or opened in a separate browser tab related to the host application or a website. Optionally, to create a report that does not require any authentication by the end-user, use the 'Published Report' feature that includes impersonation data for this purpose. (Navigate to Analysis > Report > Published report to define) Example:


//Published report using the IFrame element
<iframe src='http://YourKyubitSiteURL/Report.aspx?Analysis=alias' frameborder='0' vspace='0' hspace='0' 
marginwidth='0' marginheight='0'  width='100%' height='100%' scrolling='no' >
</iframe>


//Embeded Decomposition Analysis with hidden elements defined in URL
<iframe src='http://YourKyubitSiteURL/decomposition/999?hideSave=1&hideHeader=1&hideComments=1&hideFavorites=1&hidePrint=1' frameborder='0' vspace='0' hspace='0' 
marginwidth='0' marginheight='0'  width='100%' height='100%' scrolling='no' >
</iframe>

IFRAME embedded BI approach advantage is speed and self-service analyitics and dashboard features behavior exactly as within the Kyubit application.

Learn about Embedded Analytics IFRAME Integrations

Embed Individual Charts/KPIs

Embed individual Kyubit data visualizations (Charts/Metrics/KPIs) by including Kyubit Javascript/CSS files to your website/application and connect to previously created analyses or queries. This approach enables users of your application to analyze OLAP, Tabular, SQL, Excel, and CSV data directly on your page, using analytic features like drill-down, drill-through, large View analysis, export to Excel files, customize appearance, caching, and others. Example:

<script type='text/javascript'>
$(document).ready(function ()
{
    $kyu.initVisualization('testDiv', {
        name: 'My Visualization',
        analysisId: 2053,
        chartType: 'Doughnut_Chart',
        colorPallete: 0,
        allowLargeView: true,
        refreshTime: 5
    }
}
</script>

HTML/Javascript embedded BI approach advantage is the integration of a particular analytics within a single HTML DIV element and customization of embedded analytics behavior options.

Learn about Embedded Analytics Javascript Integrations

Authentication while embedding Kyubit content

If using Windows Integrated Authentication, users will be automatically authenticated while accessing Kyubit content. If using the Windows Login Form or Kyubit Users authentication, a login prompt will appear to access embedded Kyubit content. In that case, to avoid the Kyubit login prompt, use Kyubit Javascript API to authenticate programmatically in the background prior to accessing Kyubit content (Mimic Single Sign-On). To learn more about the Kyubit Javascript API authentication, please read the first 3 points on the Kyubit Javascript API reference.

Video - Embedded BI Analytics and Dashboards for any web site

Introduction to Embedded BI with Kyubit

This video demonstrates how to embed BI interactive OLAP/SQL/CSV analytics and data visualizations in any website or application. Suppose that you have any kind of HTML page with a list of your products and a place where you would like your users to analyze data from your OLAP, SQL, or CSV data sources. It only takes adding a required javascript and CSS files and writting a few simple lines of code for embedded BI magic to appear on your page. Any analysis, query, or dashboard created in Kyubit BI will be rendered on your page with embedded analytics interactive ability to drill down your data, drill by any available dimension in your cube, change chart type, drill through the data, and many more. Users will also be able to enlarge presented embedded visualization, export embedded analytics to Excel file or continue analysis with full analytic features inside the Kyubit Business Intelligence app. Same way created KPIs and Gauge visualization could be included into your page to show metrics and the success of your business goals. Add the ability for your users to explore and discover OLAP data structures on your page within minutes.

Embedded BI Basics (HTML/Javascript Integration)

Let's start from the beginning. Open your Kyubit BI application and create some simple analysis. Choose your 'OLAP/Tabular' or 'Analytic Model' data source and drag-and-drop some dimension hierarchies to see some data related to your products. Save your analysis and go to your HTML page where you would like to reuse the created analysis. Add prerequisite embedded BI javascript files to your page and decide the location of the HTML element where you would like your visualization to appear. Within Kyubit global configuration, set the URL to the Kyubit application that will be shared among multiple visualizations on your site. Also, here are attributes that will set the general layout and behavior of integrated analysis on your site in general. Finally, create a javascript function that will initiate embedded analytics integration as soon as your page loads and set parameters for embedded analytics you would like to show. First, embedded BI analytics is here, but now you will want to customize its appearance. Set value labels to show on the chart. For all labels or only top values. Add series to your analysis for more detailed visualizations and set the 'Column Chart' chart type to your embedded analytics details parameters. Any of these embedded BI visualizations gives you the ability to drill your data to the point of interest using any dimension hierarchies from your OLAP cubes. Change integration color pallets to best match your site layout colors or create new color pallets with specific colors you prefer. To focus on specific data and show only part of your initial analysis, set specific categories and series you wish to show. Choose the 'Pivot' option to switch categories and series values on your chart. Set 'Refresh' time interval, after which data will be automatically refreshed with current values from a data source or set cache parameters that will hold integration data in the memory for a specific amount of time. A more advanced embedded BI scenario is that you would like to have analysis in the context of some data from your page. For example, you would like to show an analysis for a given product from the page, you have selected. When the user clicks on the 'Details' specific product, the analysis will be displayed. First, create a certain analysis with dimensions you would like to see on your categories, series, and filters within the Kyubit BI app. It will take a minute to prepare any kind of embedded analytics and save it to be reused. Create a javascript function that will be called when used clicks on details, passing the product key as an argument. Within this function, we shall call the integration function, but this time we will add a slicer parameter. The integration function can have any number of slicer parameters that consist of slicer ID, which stands for dimension hierarchy we would use for slicing, and slicer value which is actual member unique value used for filtering. Of course, we shall set the product key to create final slicer parameter values for data integration. Now, we have integrated visual analysis in the context of the data the user has previously selected. After the user selects details for any product, he is able to see embedded analytics data and interactively explore data on this page, export data to Excel or continue analysis in the Kyubit BI platform. Set a series of values to display the 'Trend' or 'Average' line on the chart.

Embedded BI Dashboards or OLAP/SQL/CSV Reports using IFRAME

It is also possible to integrate the whole dashboard created in the Kyubit business intelligence platform using the IFRAME HTML element. Set the URL of the IFRAME to point to the Kyubit application with parameters for the specific dashboard and some parameters that will hide unnecessary items in the toolbar. Again, to show the dashboard in the context of a particular product, we will create a function that will pass the product key to set the appropriate URL for dashboard visualizations. We shall set the URL for the dashboard, but this time we will add a slicer value for the dashboard. The slicer consists of the filter dimension hierarchy defined in the dashboard and the slicer member's unique value. Ampersand is escaped with HTML equivalent. Every time we click on 'Details' same dashboard is rendered, but every time with a different slicer value to show product-specific dashboard visualization. Using IFRAME elements, we can also embed analytics reports to our web page based on OLAP/Tabular/SQL/Excel/CSV data. OLAP/Tabular or self-service analytics reporting is specific as it shows expanded portions of OLAP/Tabular or self-service analytics data, making a sort of analysis tree, that is intuitive to users exploring the data. Drag-and-drop dimension hierarchies on the category and series axis, expand any of dimension members, and prepare all visual details OLAP/Tabular or self-service analytics report could include 3D visualizations that could be part of the report embedded to your page. Set value bars to visually indicate the impact of the values compared to totals. Save the analysis and set the URL within the IFRAME element to point to the saved analysis and be rendered on your page. Kyubit Business Intelligence provides simple and advanced embedded analytics visualization for data analysis and features to integrate within your page within minutes.