Presenting tag History in a Chart

This guide will instruct you how to add a History service, a Chart component and bind the output values from the History service to the Chart. The display produced will show the 2 hour history of a selected tag.

Guide for presenting tag History in a Chart

1. Create a new Display by clicking the three dots next to an item in the Directory Explorer and selecting New Display.

   

2. Add a Chart component from the Components menu in the Toolbox.

   
   

3. Add a History service from the Services menu in the Toolbox. The History service will now be visible in the Data Outline.

   
   

4. Fetch a Tag

   1. Go to Data Outline > Services and select the History service.

      
      

   2. Click on the plus (+) sign next to the Actions label and select “Fetch Tag” in the dialog box that appears.
      Click on the Actions label to make the sub tab Fetch Tag visible and click on Fetch Tag to expand the fields.
      Go to the Event parameter and select “Display - On Load”. This will make the tag fetched when the display is opened.
      

      
      

   3. Go to the Tag Name field under Fetch Tag and click on the tag icon to the left to search for a tag or enter the name of the tag directly in the field.
      The dialog box “Add Tag(s)” opens. Enter the name or part of a name for a tag, by using a wildcard (*), and click the search button or the Enter key on your keyboard. Select a tag from the list and click the add button.

      
      

   4. Click the play-button-icon next to the Fetch Tag label to force a fetch of the tag.

   Tip: If you want to check if a tag has been fetched you can open the history object in the Data Outline and hover over the attributes to see that it contains information about the selected tag.

5. Connect the History service to the Chart by binding the History service data object to the Charts data field. There are two alternative ways to achieve the binding:

   Binding - Expression Editor

   Select the Chart component, go to Properties and the Data field. Click on the Expression Editor icon to the right of the Data field to open the Expression Editor.
   A dialog box with the Expression Editor now appears.
   Go to the menu to the left and open Services > the History service and click on data to bind it to the Charts Data field.
   The binding and its containing data is shown in the window.
   Click on Save.

   There is now a binding between the History service data object and the Data field of the Chart component, which is showed by the text in the Data field. The dark background indicates that a binding is made.

   
   

   Binding - Data Outline

   Select the Chart component, go to Properties and click in the Data field. The help text that belong to the field now turns red, indicating that the field is active. Go to Data Outline > Services > the History service and click on data.

   There is now a binding between the History service data object and Data field of the Chart component, which is showed by the text in the Data field. The dark background indicates that a binding is made.

   
   

6. Make sure the Chart component is still selected.
   Go to the property X Series and enter “timestamp” and then enter “value” to the property Y Series.
   Timestamp and value are the terms that are used in the History service data object that the binding has been made to. So entering these terms will make the timestamps of the fetched tag plotted on the x-axis and the corresponding values plotted on the y-axis.

   
   

7. If you want the description of the tag to be presented in the Chart it can be done by binding the Title of the Chart to the tags description. Make sure the Chart component is still selected.
   Go to Properties and the Title field. Click on the Expression Editor icon to the right of the Title field to open the Expression Editor.
   A dialog box with the Expression Editor now appears.
   Go to the menu to the left and open Services > the History service and click on description to bind it to the Charts Title field.
   The binding is now shown in the window.
   Click on Save.

   The description of the tag is now displayed in the Chart.
   The binding can also be done in the Data Outline as described in step 5 above.

   
   

Finished Display

We have now added a Chart component and a History service. An action has been added to the History service so that it fetches a selected tag and the data object of that tag is connected to the Charts Data field through a binding. We have entered that the timestamps will be plotted on the x-axis and the corresponding value on the y-axis.The result is a Display with a Chart where the last 2 hours value of the selected Tag is presented.