Fetch Insights with API

7min
Fetching Insights with API Based Integration
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 Code
In 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){
	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){
	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) {
  	 $("#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) {
  	 $("#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 10 Mar 2024
Did this page help you?
Rest API Integration To Fetch Data
Filters