BridgeGate™
Tutorial 13: Using BridgeGate to create a HTML Report
Getting Started with the HTML Report Tutorial
In this exercise we will be demonstrating the use of BridgeGate to dynamically create a HTML Report.
The tutorial has two HTML reports. The first named "simple_report" will demonstrate how to dynamically create the HTML from a HTML template
The second tutorial will demonstrate how to allow a web page to dynamically access data via a microservice to load the chart.
Note that Javascript must be enabled for the reports to display.
Example 1: Simple Report.
Example 1 is located under the samples account and sample13/simple_report
In this example we 6 workflow items.
The Get Data Workflow item reads the pie chart data from a flat file. This is just a simple example, so the "Get Data" could be changed to read data from a database or any other source. The chart software accepts data in many formats including csv, json and rows/columns. Below is a sample of the test data.
The open source chart software used in this example is from http://c3js.org Any charting technology can be use. We choose this technology because it is used in the bridgegate transaction charting and already available on the bridgegate server.
The REPORT_TITLE Workflow item is a variable that creates a HTML title with the current date.
The Dynamic_values is a list of name value pairs that will be passed into the Plugin in the next step. In this example We have two dynamic values that will be replace. %%TITLE% and %%PIE_DATA%%
The Execute Plugin Workflow item is a call to the SubstringReplacementPlugin. This plugin will take the HTML template (customer_volume_pie_template.html) and dynamically replace %%TITLE%% and %%PIE_DATA%% with the list from the NVP. Below are the details on the plugin.
Below is the customer_volume_pie_template.html file with the tags %%TITLE%% and %%PIE_DATA%% that will be replaced:
<html>
<head>
<meta charset="UTF-8">
<title>Sample Dashboard</title>
</head>
<link rel="stylesheet" type="text/css" href="http://www.bridgegateasp.com/styles/c3.min.css">
<script type="text/javascript" src="http://www.bridgegateasp.com/scripts/d3.min.js"></script>
<script type="text/javascript" src="http://www.bridgegateasp.com/scripts/c3.min.js"></script>
<style type="text/css">
/*fixes pie chart tooltip display*/
#chart g.c3-chart g.c3-event-rects rect.c3-event-rect {
pointer-events: none;
}
</style>
<body>
<h2><center>
%%TITLE%%
</center></h2>
<div id="chart"></div>
</body>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
%%PIE_DATA%%
],
type : 'pie',
}
});
</script>
</html>
Note that the SOURCE_FILE ../accounts/samples/sample13/customer_volume_pie_template.html was created using a standard HTML editor. Any HTML editor can be used to create the html template.
The Send Data Workflow item delivers the final HTML to the destination. In this example we have selected a File Adapter so the HTML file can be viewed in the BGWorkbench. This can be changed to EMAIL or any other outbound Adapter.
Example 2: Report data from microservice.
Example 2 is located under the samples account and sample13/microservice. In Example 1 (simple_report) you learn how to dynamically update a templatized HTML file with the data. In this example the data is dynamically loaded into a bar chart from a microservice http request. The html file itself is a static page. The static page can be accessed using the following URL:
http://bridgegateasp.com/samples/sample13/customer_volume_bar.html
Note: This Example can not be fully tested in the GUI/Workbench and should be tested using the above static HTML.
The data source for the chart is returned by the microservice call to http://bridgegateasp.com/portal/executeworkflow?accountName=samples&wfGroupName=sample13&wfName=microservice
The following static html (customer_volume_bar.html) below has the call to the microservice in bold and underlined. After the html page is opened in a browser it make a call to the bridgegate microservice to download the data for the chart.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Dashboard</title>
</head>
<link rel="stylesheet" type="text/css" href="http://www.bridgegateasp.com/styles/c3.min.css">
<script type="text/javascript" src="http://www.bridgegateasp.com/scripts/d3.min.js"></script>
<script type="text/javascript" src="http://www.bridgegateasp.com/scripts/c3.min.js"></script><body onload="loadPage();">
<h2><center>
Transaction Volume by Account<span id="thedate"></span>
</center></h2>
<div id="chart"></div>
<br><h3><center>The data is dynamically retrieved from the following BridgeGate Workflow<br>
http://bridgegateasp.com/portal/executeworkflow?accountName=samples&wfGroupName=sample13&wfName=microservice
</center></h3>
</body>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
url: 'http://bridgegateasp.com/portal/executeworkflow?accountName=samples&wfGroupName=sample13&wfName=microservice',
type: 'bar',
}
});
function loadPage() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
document.getElementById("thedate").innerHTML=today;
}
</script>
</html>
The microservice is a simple BridgeGate workflow. It has the following steps to extract transaction counts from a database and convert it into the default csv format the chart can load. The steps are described below:
Get Data Workflow item configures the BridgeGateHTTP real time service to accept the microservice call. Note you must select "Enable Workflow to be Executed as a Service" for this to enable the service to be remotely accessed. Also the "Send Synchronous Response" must be enabled to send back to the chart the chart data.
The Get Data from Database Workflow item access the bridgegate database.
The Translate Data Workflow item converts the database query to a csv format the chart can load. Example of the output is below:
"samples","bridgegate_sas","bridgegate_ops","cluster" 140,1220,7300,43573
The Send Date Workflow item is the Synchronous Response that sends the output of the translator to the calling page.