Working with Apache Velocity

Apache Velocity is a Java-based template language anyone can use to reference objects defined in Java code. You can use it to expose the output of a JSON schema via the Jetty Web Server in Niagara 4. This tool may be beneficial for applications that expect to consume data provided by the Niagara station, for example, a visualization or machine-learning library.

Prerequisites:

Given JSON’s origin as a data exchange format for the web, many libraries expect to receive input in this format. The Google Chart library is such an example. The following example is from the Google Chart project web site. Notice that the var data is populated with JSON data. Replacing hard-coded data with the output from a suitably-configured JSON schema in your station draws a chart from the Niagara station data.

<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
     google.charts.load('current', {'packages':['corechart']});
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = google.visualization.arrayToDataTable([
         ['Year', 'Sales', 'Expenses'],
         ['2004',  1000,      400],
         ['2005',  1170,      460],
         ['2006',  660,       1120],
         ['2007',  1030,      540]
       ]);
       var options = {
         title: 'Company Performance',
         curveType: 'function',
         legend: { position: 'bottom' }
       };

       var chart = new google.visualization.LineChart
       (document.getElementById('curve_chart'));

       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
   <div id="curve_chart" style="width: 900px height: 500px"></div>
 </body>
</html>

Perform the following steps:

Create a new file chart.vm and paste into it the code example of a sample chart from the json-consuming-charting library of your choice.

Replace the JSON data with a velocity variable, for example, $schema.output,

var data = google.visualization.arrayToDataTable([
        $schema.output
    ])

After saving the file, open the axvelocity palette and add a VelocityServlet named “chart” to your station.
Add a VelocityDocument below the servlet and change the Template File property to point to the chart.vm file you created earlier.
Add a new ContextOrdElement named Schema to the VelocityContext of your VelocityDocument.
Update the Schema Ord element to point to a suitable jsonSchema added to your station.
This schema could output live station data or the result of a query or transform. Both would be suitable for charting libraries, although it may be necessary to modify the time and date format form the schema default settings or to reduce the presented interval of data by using a SeriesTransform Rollup function.

So, what did we achieve? The template HTML file has a variable, which when accessed via the station’s velocity servlet will be replaced with the output from our schema.

If you add a WebBrowser from the workbench palette to a Px Page and set the ord property to http:\\127.0.0.1\velocity\chart, you should see a chart when you view the page in a web browser. If not, use the developer tools to view the source code and ensure that the output of your schema is replacing the $schema.output variable.

Working with Apache Velocity

Related Links