Create HTML code (client side)
- Last UpdatedMay 19, 2023
- 1 minute read
This example assumes that a third-party server hosts the dashboard and provides chart embed link to HTML container (Iframe).
The HTML container calls the third-party server API, which subsequently calls the Chart Template API to fetch the chart embed link. The third-party server provides the chart embed link to its HTML container as a response. The HTML container uses this link in the response as a redirection link to load a chart inside a container.
Important: Be sure you safeguard the token. Do not use it directly in HTML that gets loaded by the client’s browser.
<!DOCTYPE html>
<html>
<head>
<title>Embed Template Test</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body style="width:800px;height:800px;">
<div class="iframeHolder" style="width:100%;height:100%;">
<iframe id="ChartFrame" style="width:100%;height:100%;"></iframe>
</div>
<script type="text/javascript">
var baseUrl = 'https://<Third Party Server>/API';
var columnChartData = {
'ChartTitle': 'Template API Column Chart',
'ChartType': 'Column Chart',
'Version': '1.0',
'TimeRangeUTC': '2018-02-24T19:59:03.708Z,2018-02-26T19:59:03.708Z',
'Tags': [
{
'TagName': 'WeatherApp.Oakland.Weather ID',
'Color': '#03A9F4'
},
{
'TagName': 'WeatherDTN.Auckland.Dew Point',
'Color': '#F57F17'
}
],
"SliceBy": 'WeatherApp.Oakland.Weather Text'
};
var updateEmbedLink = function (chartId) {
var data = JSON.stringify(columnChartData);
var token = "Bearer <token_ID>";
var chartAPIUrl = "https://online.wonderware.[DOMAINSUFFIX]/apis/explore/v2/ChartApi";
var request = $.ajax({
data: data,
headers: {
'Authorization': token
},
contentType: "application/json; charset=UTF-8",
type: "post",
url: chartAPIUrl,
success: function (result) {
$("#ChartFrame").attr("src", result.RedirectUrl);
},
error: function (xhr, status, error) {
$("#ChartFrame").contents().find('body').html("");
alert('failed');
}
});
};
updateEmbedLink();
</script>
</body>
</html>