API Integration

9min
Qualetics insights are designed to be integrated with external Web apps that support a Rest API based integration. 
In order to embed any Qualetics Insight using Rest API integration method, use the following steps.
How to Access API Instructions?Go to the ﻿Visualize View  of any Qualetics Insight by following the steps below
Go to Advanced View
﻿
Advanced View
﻿
Click on the API button (Indicated by a Settings Wheel) below the Visualization
Click on API button
﻿
How to use the API Settings?Each Qualetics Insight will provide the following parameters to be used for integration
APP ID
APP Secret
Client ID
Insight URL
The parameters are displayed in the API Settings dialog window
API Settings
﻿
Example CodeIn order to render the insight in a web app, two Rest API calls need to be performed 
Get Authentication Token
Perform a POST request to render the insight
The following is an example Rest API call using Javascript to perform the authentication and POST request respectively and load into an HTML Div container
First Define HTML Div Container 
HTML
|
<body>
  <!--Begin Container to load the insight-->
  <div id="res"></div>
  <!--End Container to load the insight-->
</body>
<body>
  <!--Begin Container to load the insight-->
  <div id="res"></div>
  <!--End Container to load the insight-->
</body>
﻿
Add the following script reference to D3.JS to support visualizations
JS
|
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
﻿
Generate Token
JS
|
var token;
$(document).ready(function(){
let appid = "add374eb-1c45-4297-a668-0ff459dafei80";
let appsecret = "dab2b4df-e660-4549-8d76-a7bf54e86722";
$.post("https://iamapi.qualetics.com/generateBasicToken",{"clientId":appid,"secretId":appsecret}, function(data, status){
    console.log("Data: " , data);
	token = data.basic_token;
	getChart();
  });
});
var token;
$(document).ready(function(){
let appid = "add374eb-1c45-4297-a668-0ff459dafei80";
let appsecret = "dab2b4df-e660-4549-8d76-a7bf54e86722";
$.post("https://iamapi.qualetics.com/generateBasicToken",{"clientId":appid,"secretId":appsecret}, function(data, status){
    console.log("Data: " , data);
	token = data.basic_token;
	getChart();
  });
});
﻿
POST Request to fetch Insight
JS
|
//get chart
function getChart(){
    $.ajax({
    url : "https://portaladmin.qualetics.com:3004/chartrouter/api/v1/AC101/6204fecccc41847b2d61bc79",
    type: 'POST',
    headers: {"Authorization": token},
    data : {'token':token,'fromDate':'2022-10-03','toDate':'2022-10-30','utcoffset':'-4:00','clientId':"dev.diaramble.com"},
    error : function(err) {
      $("#res").html(err);
    },
    success: function(data) {
      console.log('satya',data);
  	$("#res").html(data);
    }
  });
}
//get chart
function getChart(){
    $.ajax({
    url : "https://portaladmin.qualetics.com:3004/chartrouter/api/v1/AC101/6204fecccc41847b2d61bc79",
    type: 'POST',
    headers: {"Authorization": token},
    data : {'token':token,'fromDate':'2022-10-03','toDate':'2022-10-30','utcoffset':'-4:00','clientId':"dev.diaramble.com"},
    error : function(err) {
      $("#res").html(err);
    },
    success: function(data) {
      console.log('satya',data);
  	$("#res").html(data);
    }
  });
}
﻿
The full example including the HTML is shown below. (Note: The example below uses jQuery as well)
HTML
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script>
var token;
$(document).ready(function(){
let appid = "add374eb-1c45-4297-a668-0ff459dafe80";
let appsecret = "dab2b4df-e660-4549-8d76-a7bf54e86722";
$.post("https://iamapi.qualetics.com/generateBasicToken",{"clientId":appid,"secretId":appsecret}, function(data, status){
    console.log("Data: " , data);
	token = data.basic_token;
	getChart();
  });
});

//get chart
function getChart(){
    $.ajax({
    url : "https://portaladmin.qualetics.com:3004/chartrouter/api/v1/AC101/6204fecccc41847b2d61bc79",
    type: 'POST',
    headers: {"Authorization": token},
    data : {'token':token,'fromDate':'2022-10-03','toDate':'2022-10-30','utcoffset':'-4:00','clientId':"dev.diaramble.com"},
    error : function(err) {
      $("#res").html(err);
    },
    success: function(data) {
      console.log('satya',data);
  	$("#res").html(data);
    }
  });
}
</script>
</head>
<body>
  <!--Begin Container to load the insight-->
  <div id="res"></div>
  <!--End Container to load the insight-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script>
var token;
$(document).ready(function(){
let appid = "add374eb-1c45-4297-a668-0ff459dafe80";
let appsecret = "dab2b4df-e660-4549-8d76-a7bf54e86722";
$.post("https://iamapi.qualetics.com/generateBasicToken",{"clientId":appid,"secretId":appsecret}, function(data, status){
    console.log("Data: " , data);
	token = data.basic_token;
	getChart();
  });
});

//get chart
function getChart(){
    $.ajax({
    url : "https://portaladmin.qualetics.com:3004/chartrouter/api/v1/AC101/6204fecccc41847b2d61bc79",
    type: 'POST',
    headers: {"Authorization": token},
    data : {'token':token,'fromDate':'2022-10-03','toDate':'2022-10-30','utcoffset':'-4:00','clientId':"dev.diaramble.com"},
    error : function(err) {
      $("#res").html(err);
    },
    success: function(data) {
      console.log('satya',data);
  	$("#res").html(data);
    }
  });
}
</script>
</head>
<body>
  <!--Begin Container to load the insight-->
  <div id="res"></div>
  <!--End Container to load the insight-->
</body>
</html>
﻿
The resulting view would load the insight as below:
Visualization rendered by API
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Yes
Embed Insights
Favorites
Docs powered by archbee
TABLE OF CONTENTS
How to Access API Instructions?
How to use the API Settings?
Example Code