Open Automation Software
Moving Data From Anywhere to Anywhere
1-303-679-0898

Getting Started – Web Trend

Example 1: Simple Trend Data Integration

The following sample illustrates how to add real time animated charting to display a single server tag value as it changes over time. Later examples will show how to track multiple tags on a single chart, as well as how to add some interactivity and switching between real time and historical data.

Step 1:

Note: In order to enable realtime trending of any Tag Value use the Configure OAS application and go to Configure-Tags to enable the Trend Point property on each Tag you want to trend.

To use the HML Trend jQuery interface you must first register the Web HMI libraries.  This is done with the OAS Service control manager with the Web HMI Registration.

Define the exclusive port number and Node Name that is to be supported.  The Node Name should be the registered domain name, IP address, or network node name that all clients will connect to from their browsers.

Web Trend 415

Note: The Node Name should be set to the Network Node Name, IP Address, or registered domain name that all client applications will browse to.  This will be the serverURL that all HTML clients will specify.

Note: Networking to other OAS Services is easily supported by defining the IP Address, Network Node Name, or registered domain name in the HTML code for the client.  Use the HTML HMI Wizard to define the remote networking nodes to multiple remote services relative to where the web project is hosted.

Step 2:

Be sure to follow instructions for configuring Web HMI as the Trend Data is an extension of that library.

In addition to the 3 previous script libraries (jQuery, json2, and opc-lib-min) copy 2 additional files from the same source location (C:Program Files (x86)Open Automation SoftwareOPC Systems.NETHTML_HMIjs) to the same destination as the others, keeping the files within a flot directory:

  1. jsflotjquery.flot.min.js
  2. jsflotjquery.flot.time.min.js

Step 3:

In the head section of the HTML file, add the following script library references:

Once you have an HTML file set up and successfully running HTML HTML, modify the OPC_config script to look like the following:

Note: As with the Web HMI configuration, you must specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 5:

Within the same script block containing the OPC_config, add the following function. This function will be responsible for rendering the data points returned by the server on each refresh call. As you can see, the name of the function trendCallback matches the value of callback defined in the OPC_config:

In the body of your HTML, add an element where the chart will be drawn, using the following bit of HTML:

Note: The id of the div element is “trend1”, which matches the chartid configured in Step 3.

Save the HTML file and add it to your application in the same way as other Web HMI web pages. The complete file should look like the following:

Example 2: Multiple Real-Time Charts

The following sample builds upon Example 1, but illustrates how to add multiple real time animated charts to an application as well as adding multiple data sets to a single chart.

Step 1:

Be sure to follow instructions for configuring Web HMI as the Trend Data is an extension of that library.

In addition to the 3 previous script libraries (jQuery, json2, and opc-lib-min) copy 2 additional files from the same source location (C:Program Files (x86)Open Automation SoftwareOPC Systems.NETHTML_HMIjs) to the same destination as the others, keeping the files within a flot directory:

  1. jsflotjquery.flot.min.js
    jsflotjquery.flot.time.min.js

Also, please review Example 1 if any of the following steps are unclear.

Step 2:

In the head section of the HTML file, add the following script library references:

Step 3:

Once you have an HTML file set up and successfully running, modify the OPC_config script to look like the following. As you can see from this configuration, there are 2 trend_bindings in the array, with the first containing 2 tags.

The first chart will display both data sets for the Ramp.Value and Random.Value server tags, and the second will display the Sine.Value tag.

Note: As with the Web HMI configuration, you must specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 4:

Within the same script block containing the OPC_config, add the following function. This function will be responsible for rendering the data points reterned by the server on each refresh call.

As you can see, the name of the function trendCallback matches the value of callback defined in the OPC_config. Also, this is identical to the callback used in the first example. The single callback can be used to render any number of trend charts placed on the page.

Step 5:

In the body of your HTML, add an element for each trend chart to be drawn:

Note: The id of the div elements are “trend1” and “trend2“, respectively, which matches the chartid configured in Step 3 for each binding.

Step 6:

Save the HTML file and add it to your application in the same way as other Web HMI web pages. The complete file should look like the following:

Example 3: Interactive Charts

The following sample illustrates how you can add interactivity to your charts, by rendering a cursor that follows the mouse position, a popup that displays the chart value at the location where the mouse hovers, and even temporarily pauses the real time rendering when a value is displayed.

Step 1:

Be sure to follow instructions for configuring Web HMI as the Trend Data is an extension of that library.

In addition to the 3 previous script libraries (jQuery, json2, and opc-lib-min) copy 3 additional files from the same source location (C:Program Files (x86)Open Automation SoftwareOPC Systems.NETHTML_HMIjs) to the same destination as the others, keeping the files within a flot directory:

  1. jsflotjquery.flot.min.js
  2. jsflotjquery.flot.time.min.js
  3. jsflotjquery.flot.crosshair.min.js

Also, please review Examples 1 and 2 if any of the following steps are unclear.

Step 2:

In the head section of the HTML file, add the following script library references:

Step 3:

In the head section of the HTML file, add the following CSS style definitions that will be used to format the chart and popup elements:

Step 4:

Once you have an HTML file set up and successfully running, modify the OPC_config script to look like the following.

Note: As with the Web HMI configuration, you must specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 5:

Within the same script block containing the OPC_config, add the following functions. These will control showing and hiding the popup that will display the chart value where the cursor is hovering.

Step 6:

Also within the script block, add the following call that will bind the mouse hover events to the chart elements.

Step 7:

The final function added to the scripts should be the trendCallback. As with other examples, this is the function executed ever time new data points are received from the OPC Server.

This also demonstrates how the grid is configured to listen to hover and click events, and how the crosshair is added to make it easier to see when the mouse hovers over it.

Step 8:

In the body of your HTML, add an element where the chart will be drawn:

Step 9:

Save the HTML file and add it to your application in the same way as other Web HMI web pages. The complete file should look like the following:

Example 4: Historical Data

The following sample illustrates how you can switch a chart between real time and historical data modes, with the historical data being a snapshot of all data points between a start and end date/time.

Step 1:

Be sure to follow instructions for configuring Web HMI as the Trend Data is an extension of that library.

In addition to the 3 previous script libraries (jquery, json2, and opc-lib-min) copy 3 additional files from the same source location (C:Program Files (x86)Open Automation SoftwareOPC Systems.NETHTML_HMIjs) to the same destination as the others, keeping the files within a flot directory:

  1. jsflotjquery.flot.min.js
  2. jsflotjquery.flot.time.min.js
  3. jsflotjquery.flot.crosshair.min.js

Also, please review Examples 1 and 2 if any of the following steps are unclear.

Step 2:

In the head section of the HTML file, add the following script library references:

Step 3:

In the head section of the HTML file, add the following CSS style definitions that will be used to format the chart and popup elements:

Step 4:

Once you have an HTML file set up and successfully running, modify the OPC_config script to look like the following.

Note: As with the Web HMI configuration, you must specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 5:

Within the same script block containing the OPC_config, add the following functions. These will control showing and hiding the popup that will display the chart value where the cursor is hovering, as well as functions for showing ins hiding axes when historical data is being displayed.

There is also a simple utility function used to validate the values entered into the text boxes on the page, ensuring that they are valid dates.

Step 6:

Also within the script block, add the following call that will bind the mouse hover events to the chart elements and the click events for the buttons on the page.

Step 7:

The final function added to the scripts should be the trendCallback. As with other examples, this is the function executed ever time new data points are received from the OPC Server.

This also demonstrates how the grid is configured to listen to hover and click events, and how the crosshair is added to make it easier to see when the mouse hovers over it.

Step 8:

In the body of your HTML, add an element where the chart will be drawn:

Step 9:

Save the HTML file and add it to your application in the same way as other Web HMI web pages. The complete file should look like the following: