Charts are very good for displaying changes in device parameters over time. In this tutorial we'll show you how to chart temperature data coming from a sensor. Connecting the sensor to the server is beyond the scope of this article, so we suppose that it is already online and visible for the system as a Device.
In AggreGate, charts are a part of Widgets engine. We're going to create a simple widget, containing a single Chart component.
The easiest way to create a chart for any AggreGate variable is to launch Configure Device (
) action, right-click on a desired variable and select Create Chart (
) item. This action will create a new widget with a chart component and with several other components for controlling chart parameters on-the-fly. Created widget will look like this:
The other way to get a variable changes chart is manually creating a widget, adding a chart component to it, and setting up the chart.
1. Starting Widget Creation
To start creating a widget, find the Device node you wish to monitor in System Tree (
). Drag and drop it on the Widgets node (
):
In the popup menu choose Create Widget (
) action. Widget Properties dialog will open. Set Widget Name to tchart, Widget Description to Temperature Chart and click OK.
This will launch the GUI Builder with an empty widget template. Dragging the Device to the widgets node means our chart will be available for every Data Terminal context.
2. Adding Chart Component
Drag the XY Line Chart component from component palette and drop it on the widget's Root Panel:
This will add a new chart component to the widget template.
3. Setting Up the Data Source
Our chart will show changes in the value of context variables. The temperature sensor has one variable we can easily graph. It is temperaturei, containing an Integer temperature value in Celsius, multiplied by 10 (i.e. value 234 is 23.4 degrees Celsius). The temperature value is, indeed, contained in a single field of this variable, also called temperaturei.
Therefore, our chart will be based on variable data. Click on the chart in the work form and change the Data Source Type property to Variable in the properties window Data tab:
Next, click in Source Variables to set up a new data series. The Source Variables window will open. Click Add Row (
) to create a new data series, then edit it:
| • | Set Name to Temperature; |
| • | Switch to the Context field and click [...] to edit the context path interactively in the Entity Selector. Select your Device from the tree (it should be bold, as it is a default context) and click OK: |
The actual value for Context field will be a dot (".") instead of the full path to the Device context. This is a relative path that will allow our chart widget to work with other similar devices, not just the one that it was created for.
| • | Select temperaturei from the list of Variables. |
| • | Switch to the Expression field and click [...] to edit the data expression interactively in the Expression Builder. First, in the Expression Builder window just double-click the temperaturei field in the Relative References section to add one relative reference. Second, append / 10 to Expression to divide the value and thus convert it to normal Celsius degrees. This is required, as the variable field initially contains temperature multiplied by 10 to allow storing it as an Integer number: |
Leave other columns unchanged. Here is what your variable data series should look like:
4. Configuring Chart Properties
At this point you may want to configure your chart. See the Chart article for more information about available properties and their descriptions. For example, you may want to change Include Historical Data and Include Real-Time Data flags to get chart based on current temperature, temperature history or both. Another option to change is Type of Domain Axis. Setting it to Date Axis or Period Axis makes horizontal axis to display dates instead of integer numbers. Yet another useful option is Renderer that affects chart's appearance.
You can also limit chart's time range by enabling the Limit Time Range option and changing Time Range to a preferred value.
5. Saving Chart Widget
Click Done (
) to finish editing and save the widget. It should appear in the System Tree:
6. Displaying Chart
Right-click the Device System Tree node () of your temperature sensor. You should see a new launch widget action named Temperature Chart (
) in the context menu:
Select this action to launch the widget for a certain temperature sensor. A new dockable window containing a widget with our chart will appear in AggreGate Client:
The chart will update dynamically if Include Real-Time Data is enabled in chart settings.
If you wish to monitor temperature constantly when AggreGate Client is running, include the chart widget in a dashboard. See How to a create dashboard to monitor your devices in real-time for more information.