Embedded Analytics with HTML/Javascript

Follow these steps to embed analytics and visualizations based on previously created analysis and queries in Kyubit BI application, to show up in your own web site/application powered by Kyubit interactive analytic features.

01. Include prerequisite files
02. Setup 'Config' file
03. Authentication
04. Basic Attributes
05. Additional Attributes
06. Geo Map Attributes
07. KPI/Gauge/Scorecard Attributes
08. OLAP/SQL Data Filtering

OLAP software 01. Include prerequisite Javascript/CSS files into your page

  • First requirement is to copy/paste Kyubit integration Javascript/CSS files to your environment (Web site).
    Prerequisite files are located in Kyubit setup location, "Javascripts/Integration" folder
    (Typically, C:\Program Files\Kyubit\BusinessIntelligence\Javascripts\Integration)
  • Include 'JQuery' and 'KineticJS' javascript libraries, only if you are not already using on your site.


Example of how included files might appear in your HTML code:
<script type="text/javascript" src="/Javascripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Javascripts/kinetic.min.js"></script>

<script type="text/javascript" src="/Javascripts/Integration/KyubitDataVisualization.js"></script>
<script type="text/javascript" src="/Javascripts/Integration/KyubitConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/Javascripts/Integration/KyubitIntegration.css" />

OLAP software 02. Setup integration 'Config' file (KyubitConfig.js)

Edit configuration file to set common shared attributes of embedded analytics on your site:

  • Set URL of Kyubit application in your environment.
  • Edit fonts and common appearance attributes.
  • Edit common color pallets used in embedded analytics visualizations.
  • Edit Icons used in embedded analytics and visualizations.
  • If required, edit phrases used by integrated visualizations to best match your requirements or for multilingual purposes.

$kyu.globalConfig =
{
    URL: "http://YourKyubitSiteURL/",
    font: "Calibri",
    fontColor: "#333333",
    fontSize: "14px",
    titleFontSize: "24px",
    chartFontColor: "#333333",
    chartFontSize: "12px",
    analysisIcon: null,
    openDashboardIcon: null,
    enlargeIcon: null,
    progressIcon: null,
    hideProgress: false         /*Hides Progess Image*/
    
    ...
}

OLAP software 03. Authentication

Depending on configured Authentication mode, user authentication might be required prior to requesting any embedded analytics data from Kyubit BI application. If 'Windows Integrated Authentication' (default) is used, current user credentials using the browser are automatically used to identify current user and explicit user authentication is not required (In that case skip Authentication step). If 'Windows Login Form' authentication or 'Kyubit Users' authentication is configured, explicit user is required as described below.

This method is called to get status, if user is already authenticated and take appropriate next step...
$(document).ready(function () {
            $kyu.getSessionAuthInfo(function (info) {

                //Check details on authentication of the current user
                //Example...
                //alert(info.IsAuthenticated);
                //alert(info.AuthenticationMethod);
                //alert(info.UserName);

                if (info.IsAuthenticated) {
                    //user is already authenticated, proceed to display data from Kyubit BI 
                    showAnalysis();
                }
                else
                {
                    login();
                }
            });
});

If user is not authenticated and explicit authentication is required, use one of the appropriate methods to authenticate user with username and password.
//Windows Explicit Authentication (Login Form)
$kyu.loginWin({
                domain: "domainname",
                userName: "winusername",
                password: "password",
                callback: function (info) {
                    if (info.IsAuthenticated) {
                        showAnalysis();
                    }
                    else {
                        alert("Authentication problem.");
                    }
                }
            })
//Kyubit User Authentication
$kyu.login({
                userName: "username",
                password: "password",
                callback: function (info) {
                    if (info.IsAuthenticated) {
                        showAnalysis();
                    }
                    else
                    {
                        alert("Authentication problem.");
                    }
                }
            })

OLAP software 04. Setup base attributes for embedded analytics visualization

Decide which 'DIV' HTML element will be used for visualization and set base attributes within $kyu.initVisualization function, that should be called within document.ready JQuery function:

  • Set analysisId or queryId for existing analysis or query in your Kyubit application instance.
  • Set name and description (Optional) for integrated visualization.
  • Decide which chartType you will use for visualization
  • Decide on visualization dimensions using width and height attributes.
  • If visualization is based on 'GeoMap' set which geoMap you will use.

$(document).ready(function ()
{
    $kyu.initVisualization("testDiv", {
        analysisId: 2053,
        name: "My Visualization",
        description: "Data Visualization description text that will be displayed above visualization",
        chartType: "Column_Chart",
        geoMap: "world",
        width: "50%",
        height: "400px",
        ...
       


Samples (Base Attributes)

Simple Pie Chart embedded analytics based on OLAP analysis, with Drill-Down features and value labels.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Bike Sales Analysis",
        analysisId: 2038,
        chartType: "Pie_Chart",
        width: "100%",
        height: "400px",
        valueLabels: "All"
    });
});
Embedded Analytics, Embedded BI, Pie Chart OLAP Analysis
Sample Column Chart based on SQL query data.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "SQL Query Visualization",
        queryId: 2038,
        chartType: "Column_Chart",
        width: "600px",
        height: "500px",
        valueLabels: "All"
    });
});
Embedded Analytics, Embedded BI, Pie Chart OLAP Analysis

OLAP software 05. Setup optional attributes for embedded analytics visualization

Use other attributes to additionally change behaviour and look of embedded analytics visualization, depending on the data and nature of integration:

  • Set colorPallete, from existing color palettes defined in your 'config' file.
  • Decide to show analysis icon to continue analysis with openAnalysisIcon attribute.
  • Decide to allow 'Large View' of visualization with allowLargeView attribute.
  • Position legend ( Top | Right | None ).
  • Show icon that will open existing dashboard related to visualization, using dashboardID attribute.
  • Set refreshTime in minutes, that will automatically refresh visualization data.
  • To cache data on the Kyubit application level and not to go to your data sources every time integrated visualization is opened, set cacheKey and cacheMinutes attributes that will keep data in memory on the Kyubit server side for specified amount of time.
  • Setup value labels appearance on integrated visualization.
    Set valueLabels attribute ( All | None | Top1 | Top2 | Top3 | Top5 | Top10 | Last ). Optionally set category or series names that will additionally filter displayed value labels.
  • If analysis or query data return more values than are interested to you, set particular category and series values that will be filtered and displayed using specificCategories and specificSeries attributes.
  • To open new page (new tab) when you click at certain visualization value, set clickURL attribute to URL of your preference. New page will be opened together with clicked values within URL querystring.
  • Line chart could be defined with maximum and minimum values on the chart with minYOnChart and maxYOnChart attributes.
  • Table chart accepts tableDataBar attribute to display value bars.
  • Combo chart could display comparison analysis or query using secondaryQueryAnalysisID, using Line or Column chart ( secondaryChart), optionally displaying comparison analysis/query on a separate Y axis (separateAxis. If comparison is analysis, use "#" character before analysis id.
  • Use pivotChart attribute to switch categories and series positions in integrated visualization.
  • Use averageLine attribute to show average line of one or more series, separated by ';' character.
  • Use trendLine attribute to show trend line of one or more series, separated by ';' character.
  • Use categoryAggregate attribute to set aggregation on categories ( "Sum" or "Avg" )
  • Use seriesAggregate attribute to set aggregation on series ( "Sum" or "Avg" )

...

colorPallete: 0,
openAnalysisIcon: true,
allowLargeView: true,
legend: "Top",
dashboardID: 1,
               
refreshTime: 5,
cacheMinutes: 5,
cacheKey: "Key1",

valueLabels: "All",
valueLabelsFilterCategory: "California",
valueLabelsFilterSeries: "Accessories;Bikes",
                
specificCategories: "Canada;France;Germany",
specificSeries: "Accessories;Bikes",
                
clickURL: "http://www.kyubit.com",

pivotChart: false,
averageLine: null,
trendLine: "Bikes"
                
minYOnChart: 2000000,                   /* Applicable on Line Chart and Combo Chart */
maxYOnChart: 6000000,                   /* Applicable on Line Chart and Combo Chart */
tableDataBar: 1,                        /* Applicable on Table Chart */
secondaryQueryAnalysisID: "#2055",      /* Applicable on Combo Chart */
secondaryChart: "Line_Chart",           /* Applicable on Combo Chart */
separateAxis: 1,                        /* Applicable on Combo Chart */
                
...       


Samples (Additional Attributes)

Column Chart embedded analytics based on OLAP analysis, with value labels only for Top 5 values, automatic Refresh Time and Caching set to 5 minutes. Data will be automatically refresh within 5 minutes, but in the meantime data will be cached and request will render chart from data in memory and not retrieve from data source.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Bike Sales Analysis",
        analysisId: 2038,
        chartType: "Column_Chart",
        width: "100%",
        height: "400px",
        colorPallete: 0,
        openAnalysisIcon: true,
        allowLargeView: true,
        valueLabels: "Top5",
        refreshTime: 5,
        cacheMinutes: 5,
        cacheKey: "BikeSales"
    });
}); 
Embedded Analytics, Embedded BI, Column Chart OLAP Analysis
Line Chart embedded analytics based on OLAP analysis, with value labels only for Top 3 values in 'Female' series.
function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "400px",
            openAnalysisIcon: true,
            allowLargeView: true,
            valueLabels: "Top3",
            valueLabelsFilterSeries: "Female"
        });
    });
} 
Embedded Analytics, Embedded BI, Line Chart OLAP Analysis
Same Line Chart but this time with Trend and Average line for 'Female' series.
function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "500px",
            openAnalysisIcon: true,
            allowLargeView: true,
            trendLine: "Female",
            averageLine: "Female"
        });
    });
}
Embedded Analytics, Embedded BI, Line Chart OLAP Analysis
Zoom Line Chart embedded analytics, with definition for Min and Max value on the Y axis. Click URL ensures that click on the chart value will open new tab with URL and point data as parameter.
function showDetails(productKey) {
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Analysis",
            analysisId: 2042,
            chartType: "Line_Chart",
            width: "100%",
            height: "400px",
            openAnalysisIcon: true,
            allowLargeView: true,
            minYOnChart: 100000,
            maxYOnChart: 400000,
            clickURL: "http://www.kyubit.com"
        });
    });
}
Embedded Analytics, Embedded BI, Line Chart OLAP Analysis
Table Chart displays data in any number of rows and column with slider (if necessary). This chart is based on SQL query results. Queries could MDX statements as well. Table data bar renders visual bar for all numeric values.
function showDetails( productKey )
{
    $(document).ready(function () {
        $kyu.initVisualization("analysisDiv", {
            name: "Query",
            queryId: 2020,
            chartType: "Table",
            width: "100%",
            height: "400px",
            allowLargeView: true,
            tableDataBar: 1
        });
    });
}
Embedded Analytics, Embedded BI, Table Chart OLAP Analysis

OLAP software 06. Geo Map Embedded Analytics

  • Set geoMap attribute to show different geo maps of various continents, countries and regions. ( World | Continents | US | EU | DE | FR | ES ... )
  • If data contains series of values. Data can be displayed as color gradient for every region or geo map can show which series of values is dominant in that region by using attribute geoDominantSeries.
  • Geo map shows data related to geo map regions, but can also render data related to specific cities or custom geo location using 'Geo Markers' data.
  • Set geoMarkersAnalysisID to point which analysis will be used to show geo location markers data.
  • Set geoMarkersQueryID to point which analysis will be used to show geo location markers data.
  • Decide geoMarkersMeasureColor to tell which measure (1 or 2) will be used to present geo marker color.
  • Set geoMarkersColor1 and geoMarkersColor2 that will be used to find color gradient that represents influence of the value
  • Decide geoMarkersMeasureRadius to tell which measure (1 or 2) will be used to present geo marker radius.
  • Set geoMarkersRadius1 and geoMarkersRadius2 that will be used to set geo marker radius that represents influence of the value

...

geoMap: "world",
geoDominantSeries: 1,
geoMarkersAnalysisID: 102,
geoMarkersQueryID: 202,
geoMarkersMeasureColor: 1,
geoMarkersColor1: "#f88484",
geoMarkersColor2: "#a1e917",
geoMarkersMeasureRadius 2,
geoMarkersRadius1: 3,
geoMarkersRadius2: 10,

...

Samples (Geo Charts)

Geo Chart embedded analytics, display values across countries, states and counties, for whole world, particular continents or specific countries.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Geo Analysis",
        analysisId: 1,
        chartType: "Geo_Map",
        width: "100%",
        height: "400px",
        openAnalysisIcon: true,
        allowLargeView: true,
        valueLabels: "All",
        geoMap: "world"
    });
});
Embedded Analytics, Embedded BI, Column Chart OLAP Analysis
Embedded analytics Geo Chart that displays dominant series in particular regions.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "US States",
        analysisId: 101,
        chartType: "Geo_Map",
        geoMap: "US",
        geoDominantSeries: 1,
        width: "600px",
        height: "500px",
        allowLargeView: true,
        valueLabels: "All"
    });
});
Embedded Analytics, Embedded BI, Column Chart OLAP Analysis
Geo map that also displays geo location data (related to cities or custom geo location) with Geo Markers that can render circle with radius and color depending on the value related.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "Geo Analysis",
        analysisId: 101,
        chartType: "Geo_Map",
        geoMap: "AU",
        width: "100%",
        height: "400px",
        geoMarkersAnalysisID: 303,
        geoMarkersMeasureColor: 1,
        geoMarkersMeasureRadius: 2,
        geoMarkersColor1: "#f88484",
        geoMarkersColor2: "#a1e917",
        geoMarkersRadius1: 4,
        geoMarkersRadius2: 8
    });
});
Embedded Analytics, Embedded BI, Column Chart OLAP Analysis

OLAP software 07. Embedding KPI, Gauges and Scorecards

  • Embed KPI, Gauge or Scorecard by setting chartType to ( KPI | Gauge_Meter | Scorecard ).
  • Set gaugePointer to define gauge visualization options.
  • Set colorMeter to define gauge coloring options.
  • Set miniChart visualization for the KPI display ( Line_Chart | Column_Chart ).

...

kpiId: 101,
gaugePointer: 1,
colorMeter: "Complete",
miniChart: "Line_Chart"

...

Samples (KPI, Gauge, Scorecards)

KPI with current status icon, value, last change and line chart presenting KPI history data.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "KPI",
        kpiId: 3,
        chartType: "KPI",
        width: "100%",
        height: "70px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, KPI visualization
Gauge Meter displays metrics of the defined KPI value between 'Success' and 'Fail' status.
$(document).ready(function () {
    $kyu.initVisualization("kpiDiv", {
        name: "Gauge",
        kpiId: 3,
        chartType: "Gauge_Meter",
        gaugePointer: 1,
        width: "100%",
        height: "300px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, Gauge Meter
Gauge Meter displays metrics of the defined KPI value between 'Success' and 'Fail' status.
$(document).ready(function () {
    $kyu.initVisualization("kpiDiv", {
        name: "Gauge",
        kpiId: 3,
        chartType: "Gauge_Meter",
        gaugePointer: 1,
        colorMeter: "Complete",
        width: "100%",
        height: "300px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, Gauge Meter
Gauge Meter displays metrics of the defined KPI value between 'Success' and 'Fail' status.
$(document).ready(function () {
    $kyu.initVisualization("kpiDiv", {
        name: "Gauge",
        kpiId: 3,
        chartType: "Gauge_Meter",
        width: "100%",
        height: "300px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, Gauge Meter

OLAP software 08. OLAP and SQL data filtering

Embedded analytics created using analysis and SQL queries could be additional filtered on the embedded analysis page by adding slicers and sqlFilters to the attribute definition.

  • To filter analysis add slicer object with slicerID and slicerValue properties to slicers array attribute.
  • To filter sql query data add sqlFilter object with parameterName, value and type properties to sqlFilters array attribute.

...

slicers: [
            { 
                "slicerID": "[Product].[Product Categories]", 
                "slicerValue":"[Product].[Product Categories].[All Products].[Clothing],[Product].[Product Categories].[All Products].[Bikes]"
            }
         ],
sqlFilters: [
                { 
                    "parameterName": "@country", "value": "France", "type": "Text" 
                }, 
                { 
                    "parameterName": "@shipDate", "value": "20100501", "type": "Date" 
                }
            ]

...

Samples (Filtering)

Embedded analytics with OLAP analysis additional sliced by the defined slicers on the page.
$(document).ready(function () {
                        
    $kyu.initVisualization("analysisDiv", {
        name: "Analysis with Filtering",
        analysisId: 2053 ,
        chartType: "Column_Chart",
        slicers: [{ "slicerID": "[Product].[Product Categories]", "slicerValue": "[Product].[Product Categories].[All Products].[Clothing],[Product].[Product Categories].[All Products].[Bikes]" }],
        valueLabels: "Top3",
        width: "600px",
        height: "500px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, Analysis Slicers
Adding slicers to embedded analytics based on Analytic Model created in Kyubit BI.
$(document).ready(function () {
    $kyu.initVisualization("kpiDiv", {
        name: "Analytic Model with Filtering",
        analysisId: 40232,
        chartType: "Column_Chart",
        slicers: [{ "slicerID": "PurchaseYear", "slicerValue": "2017" }],
        width: "100%",
        height: "300px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI, Gauge Meter
Data from SQL query with additional SQL filters. SQL query must be defined to accept filter parameters.
$(document).ready(function () {
    $kyu.initVisualization("analysisDiv", {
        name: "SQL Query with Filtering",
        queryId: 1013 ,
        chartType: "Column_Chart",
        sqlFilters: [{ "parameterName": "@country", "value": "France", "type": "Text" }, { "parameterName": "@shipDate", "value": "20100501", "type": "Date" }],
        valueLabels: "Top3",
        width: "600px",
        height: "500px",
        openAnalysisIcon: true,
        allowLargeView: true
    });
} 
Embedded Analytics, Embedded BI with SQL filters
Embedded Analytics, Embedded BI