Introduction
This video demonstrates how to
embed BI interactive OLAP/SQL/CSV analytics and data visualizations in any web site or application.
Suppose that you have any kind of HTML page with the 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 to add required javascript and css files and write 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 bi visualization, export embedded analytics to Excel file or continue analysis with full analytic features inside Kyubit Business Intelligence app.
Same way created
KPIs and Gauge visualization could be included to your page to show metrics and success of your business goals.
Add 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' 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 created analysis.
Add prerequisite embedded BI javascript files to your page and decide location of the HTML element where you would like your visualization to appear.
Within Kyubit global configuration, set URL to Kyubit application that will be shared among multiple visualizations on your site.
Also, here are attributes that will set general layout and behaviour of integrated analysis on your site in general.
Finally, create 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 'Column Chart' chart type to your
embedded analytics details parameters.
Any of these
embedded BI visualizations gives you 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 your prefer.
To focus on specific data and show only part of your initial analysis, set specific categories and series you wish to show.
Choose '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 data source or set cache parameters that will hold integration data in the memory for specific amount of time.
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 analysis for a given product from your page, you have selected.
When user click on 'Details' specific product, analysis will be displayed.
First, create certain analysis with dimension you would like to see on your categories, series and filters within Kyubit BI app.
It will take a minute to prepare any kind of embedded analytics and save it to be reused.
Create javascript function that will be called when used clicks on details, passing product key as an argument.
Within this function, we shall call integration function, but this time we will add slicer parameter.
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 that is actual member unique value used for filtering.
Of course, we shall set product key to create final slicer parameter values for data integration.
Now, we have integrated visual analysis in the context of the data user has previously selected.
After 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 Kyubit
Self-Hosted BI Tools.
Set series of values to display 'Trend' or 'Average' line on the chart.
Embedded BI Dashboards or OLAP/SQL/CSV Reports using IFRAME
It is also possible to integrate whole dashboard created in Kyubit
Self-Hosted BI Tools using IFRAME HTML element.
Set the URL of the IFRAME to point to Kyubit application with parameters for specific dashboard and some parameters that will hide unnecessary items in toolbar.
Again, to show dashboard in the context of particular product, we will create function that will pass product key to set appropriate URL for dashboard visualization.
We shall set URL for dashboard, but this time we will add slicer value for the dashboard.
Slicer consist of the filter dimension hierarchy defined in the dashboard and the slicer member unique value.
Ampersand is escaped with HTML equivalent.
Every time we click on 'Details' same dashboard is rendered, but every time with different slicer value to show product specific dashboard visualization.
Using IFRAME elements, we can also
embed OLAP/SQL analytics report to our web page.
OLAP reporting is specific as it show expanded portions of
OLAP data, making 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 report could include 3D visualizations that could be part of the report embedded to your page.
Set value bars to visually indicate impact of the values compared to totals.
Save analysis and set URL within IFRAME element to point to 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.