Qlik Sense mashup using Metric Insights API
This article shows a working example of using the Metric Insights API from a Qlik Sense mashup.
You can refer to more details on integrating the Metric Insights API call into your web app.
Qlik Sense mashup
This Qlik Sense mashup illustrates using the Metric Insights API. In this example, the Alerts, Notes and Annotations at the bottom are the result of calling the Metric Insights API.
Layout in Qlik Sense workbench
Example mashup as viewed from Qlik Sense workbench
https://qliksense-test.metricinsights.com/workbench/mashup.html?extension=MetricInsightsMashup
HTML file for mashup
<!doctype html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense: Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<!--Add host to these 3 links if the mashup is on another webserver than qlik sense static content-->
<link rel="stylesheet" href="/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="/resources/assets/client/client.css" media="all">
<script src="/resources/assets/external/requirejs/require.js"></script>
<script src="MetricInsightsMashup.js"></script>
</head>
<body style="overflow:auto">
<div id="myDiv" class="qvplaceholder" data-qvid="nvqpV" style="width:800px;height:400px;"></div>
<div style="width:910px;">
<div style="width:300px;display: inline-block; vertical-align: top;">
<h2>Alerts:</h2>
<div id="miAlertsDiv"></div>
</div><div style="width:300px;display: inline-block; vertical-align: top;">
<h2>Notes:</h2>
<div >
<div id="addNoteDiv">
<input type="text" name="noteText" id="noteText" placeholder="Add note" /><a id="addNodeA" href="javascript:void(0)">Add</a>
</div>
<div id="miNotesDiv"></div>
</div>
</div><div style="width:300px;display: inline-block; vertical-align: top;">
<h2>Annotations:</h2>
<div id="miAnnotationsDiv"></div>
</div>
</div>
</body></html>HTML file used for the Qlik Sense mashup
https://qliksense-test.metricinsights.com/extensions/MetricInsightsMashup/MetricInsightsMashup.html
JavaScript file for calling Metric Insights API
/*global require, alert*/
/*
*
* @owner Enter you name here (xxx)
*/
/*
* Fill in host and port for Qlik engine
*/
var config = {
host: window.location.hostname,
prefix: "/",
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources"
} );
var MIHostName = "https://adam.metricinsights.com";
var MIElement = 3210;
var MIToken = '';
function loadAlerts(){
$.ajax({
url:MIHostName+"/api/metric_alert?element="+MIElement+"&html=Y",
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
},
statusCode:{
401:function(){ $.getScript(MIHostName+"/api/index/get-qlik-token/token.js",function(){ if (MIToken) loadAlerts(); }); }
}
}).then(function (data){
$('#miAlertsDiv').html('');
if (data && data.metric_alerts)
for(var i=0;i<data.metric_alerts.length;i++)
$('#miAlertsDiv').append('<p>'+(data.metric_alerts[i].text_html?data.metric_alerts[i].text_html:data.metric_alerts[i].text)+'</p>');
console.log("alerts",data);
});
}
function loadAnnotations(){
$.ajax({
url:MIHostName+"/api/metric_annotation?element="+MIElement+"&html=Y",
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
},
statusCode:{
401:function(){ $.getScript(MIHostName+"/api/index/get-qlik-token/token.js",function(){ if (MIToken) loadAnnotations(); }); }
}
}).then(function (data){
$('#miAnnotationsDiv').html('');
if (data && data.metric_annotations)
for(var i=0;i<data.metric_annotations.length;i++)
$('#miAnnotationsDiv').append('<p>'+data.metric_annotations[i].text+'</p>'+'<p style="text-align:right">'+($.datepicker.formatDate('DD, d MM, yy', new Date(data.metric_annotations[i].measurement_time)))+'</p>');
console.log("annotations",data);
});
}
function loadNotes(){
$.ajax({
url:MIHostName+"/api/note?element="+MIElement,
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
},
statusCode:{
401:function(){ $.getScript(MIHostName+"/api/index/get-qlik-token/token.js",function(){ if (MIToken) loadNotes(); }); }
}
}).then(function (data){
$('#miNotesDiv').html('');
if (data && data.notes)
for(var i=0;i<data.notes.length;i++)
$('#miNotesDiv').append('<p>'+data.notes[i].text+'</p>');
console.log("notes",data);
});
}
function addNote(){
var el = $('#noteText');
if (!el.val()) {
alert('Please enter text');
el.focus();
return;
}
$.ajax({
url:MIHostName+"/api/note?element="+MIElement,
method:'POST',
dataType: 'json',
data:{"element":MIElement, text:el.val()},
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
},
statusCode:{
401:function(){ $.getScript(MIHostName+"/api/index/get-qlik-token/token.js",function(){ if (MIToken) addNote(); }); }
}
}).then(function (data){
el.val('');
loadNotes();
});
}
require( ["js/qlik"], function ( qlik ) {
qlik.setOnError( function ( error ) {
alert( error.message );
});
$.ajax({
url:MIHostName+"/api/index/qlik-token/",
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
}
}).then(function (data){
MIToken = data.token;
console.log("token",data);
loadAlerts();
loadNotes();
loadAnnotations();
});
var app = qlik.openApp("8913ed6b-587d-4e4e-ac2e-5f304fe27dd9",config);
$('.qvplaceholder').each(function(){
var qvid = $(this).data('qvid');
app.getObject(this,qvid);
});
$('#addNodeA').click(function(){
addNote();
});
});JavaScript file used for Qlik Sense mashup
https://qliksense-test.metricinsights.com/extensions/MetricInsightsMashup/MetricInsightsMashup.js
The JavaScript file contains the API calls to Metric Insights.
Key points in using the API are discussed in more detail on integrating the Metric Insights API call into your web app. Reference that to see how:
1. All API calls require a token
2. Determine which elements in Metric Insights to pull data from.