Embedded Analytics with HTML/Javascript

Follow these steps to embed analytics and visualizations based on previously created self-service analytics and queries in the Kyubit BI application, to show up in your own website/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

  • The first requirement is to copy/paste Kyubit integration Javascript/CSS files to your environment (Web site).
    Prerequisite files are located in the 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 them on your website.


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 the configuration file to set common shared attributes of embedded analytics on your site:

  • Set the URL of the 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 the configured Authentication mode, user authentication might be required prior to requesting any embedded analytics data from the Kyubit BI application. If 'Windows Integrated Authentication' (default) is used, current user credentials using the browser are automatically used to identify the current user, and explicit user authentication is not required (In that case skip the authentication step). If 'Windows Login Form' authentication or 'Kyubit Users' authentication is configured, the explicit user is required as described below.

This method is called to get status, if a user is already authenticated and takes the 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 the user is not authenticated and explicit authentication is required, use one of the appropriate methods to authenticate the user with a 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, which 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 the '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 behavior 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 the 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 the 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 a 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 returns more values than are interesting to you, set particular category and series values that will be filtered and displayed using specificCategories and specificSeries attributes.
  • To open a new page (new tab) when you click at a certain visualization value, set the clickURL attribute to the URL of your preference. A new page will be opened together with clicked values within the URL querystring.
  • Line chart could be defined with maximum and minimum values on the chart with minYOnChart and maxYOnChart attributes.
  • The 'Table chart' accepts tableDataBar attribute to display value bars.
  • Combo chart could display the 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 the average line of one or more series, separated by the ';' character.
  • Use trendLine attribute to show the 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 refreshed within 5 minutes, but in the meantime, data will be cached and the request will render the chart from data in memory and to be not retrieved directly from the 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 the Top 3 values in the '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 the '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 a definition for Min and Max value on the Y axis. Click URL ensures that clicking on the chart value will open a new tab with the URL and point data as parameters.
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
The Table Chart displays data in any number of rows and columns with a slider (if necessary). This chart is based on SQL query results. Queries could be MDX statements as well. The table data bar renders a 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 a series of values. Data can be displayed as a color gradient for every region or a geo map can show which series of values is dominant in that region by using the attribute geoDominantSeries.
  • Geo map shows data related to geo map regions, but can also render data related to specific cities or custom geo locations using 'Geo Markers' data.
  • Set geoMarkersAnalysisID to the point in which analysis will be used to show geolocation 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 the 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 the 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 the 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 a 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 additionally 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