Displaying Metric Insights content in web page using API via JavaScript
This article provides an example of using the Metric Insights API via JavaScript to display Alerts and other items in your website.
See the follow-on article to see what items to pull via API such as which Element ID to use for your Metric or Report in Metric Insights.
PRE-REQUISITES:
- Set up API access.
- Verify that you have API access
- Obtain a token via a get token call since all API calls require a token
NOTE: the format of the API Test Tool is slightly different in Version 3.
1. Use JavaScript to call the API
You can pull Alerts, Annotations, Notes and other items stored in Metric Insights and display them in your website. Just use the API with some JavaScript coding.
1.1. Sample Website that pulls in content from Metric Insights via API
Example of Alerts, Annotations and Notes pulled from Metric Insights via API and displayed in a separate website.
1.2. API via JavaScript
NOTE: All API calls require a Token.
1. To make any API calls from JavaScript you will first need to obtain a token. In the example here we have included a server side function ("/qlik-token") that contains the authentication information for API access. This is just for illustrative and test purposes. You will need to supply your own server side method to obtain a token. And this server side code can be be done on any server; it does not have to be on Metric Insights server as shown in the example. Requiring server side call prevents setting up API access in the web browser. Metric Insights prevents you from making the Get Token (get_token) API call directly from the web browser due to Cross-Origin Resource Sharing (CORS) AJAX restriction. However, all other API calls are allowed for CORS once you obtain a token.
1.3. API via JavaScript in HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head>
<title>Metric Insights | Demo</title>
<script type="text/javascript" src="https://hackathon2015.metricinsights.com/js/jquery/jquery-1.10.2.min.js"></script>
</head>
<body id="top" style="background-color: white;">
<div class="wrapper col3">
<div>
<h3>Alerts</h3>
<div id="alerts"/>
</div>
<div>
<h3>Annotations</h3>
<div id="annotations"/>
</div>
<div>
<h3>Notes</h3>
<div id="notes"/>
</div>
</div>
<script>
var MI_URL = "https://hackathon2015.metricinsights.com";
var ELEMENT_ID = "60";
var MIToken = "";
$(document).ready(function() {
$.ajax({
url:MI_URL+"/api/index/qlik-token/",
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
}
}).then(function (data){
MIToken = data.token;
//console.log("token response",data);
//console.log("token",MIToken);
$.ajax({
url:MI_URL+"/api/metric/id/" + ELEMENT_ID,
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
}
}).then(function (data){
//console.log("mi data response",data);
});
$.ajax({
url:MI_URL+"/api/metric_alert?element=" + ELEMENT_ID,
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
}
}).then(function (data){
//console.log("mi data response",data);
var txt=document.getElementById("alerts");
if (data && data.metric_alerts) {
var text = "";
var item = "";
for(var i=0; i< 10 && i< data.metric_alerts.length; i++) {
item = data.metric_alerts[i].text_html?data.metric_alerts[i].text_html:data.metric_alerts[i].text;
text = text + item + "<br/>";
}
txt.innerHTML=text;
};
});
$.ajax({
url:MI_URL+"/api/metric_annotation?element=" + ELEMENT_ID,
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
}
}).then(function (data){
//console.log("mi data response",data);
var txt=document.getElementById("annotations");
if (data && data.metric_annotations) {
var text = "";
var item = "";
for(var i=0; i< 10 && i< data.metric_annotations.length; i++) {
item = data.metric_annotations[i].text + " at " + data.metric_annotations[i].measurement_time;
text = text + item + "<br/>";
}
txt.innerHTML=text;
};
});
$.ajax({
url:MI_URL+"/api/note?element=" + ELEMENT_ID,
method:'GET',
dataType: 'json',
accepts: {
text: 'application/json'
},
beforeSend: function (request){
request.setRequestHeader("Token", MIToken);
}
}).then(function (data){
//console.log("mi data response",data);
var txt=document.getElementById("notes");
if (data && data.notes) {
var text = "";
var item = "";
for(var i=0; i< 10 && i< data.notes.length; i++) {
item = data.notes[i].created_time + " : " + data.notes[i].text;
text = text + item + "<br/>";
}
txt.innerHTML=text;
};
});
});
});
</script>
</body>
</html>2. Use API Toolkit to test and discover API calls
Use the API Test Tool to test the API calls and discover the API format for requests and responses.
In this example, we pull all the data for the Metric identified by its Element ID.
The tool gives you the API url to use in your code:
https://uma.metricinsights.com/api/metric_data?element=13. Looking in Metric Insights to see what items to pull via API
See the follow-on article to see what items to pull via API such as which Element ID to use for your Metric or Report in Metric Insights.