This tutorial demonstrates how to use a mixed chart to combine two charts: one for displaying data and another for showing trend lines for this data. We'll use chart temperature and humidity 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.
The result of this tutorial will be a widget with a temperature and humidity chart with trend lines:
1. Starting Widget Creation
To start creating a widget, find the Device you wish to monitor in System Tree (
). Drag device node 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 Charts
Drag the Mixed XY 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. Turn on Horizontal and Vertical filling for chart by pressing buttons in the toolbar.
A mixed XY chart is a composite chart that can hold other non-mixed XY charts sharing the plot and axes. Particularly, it lets one charts to draw trends for another.
Then drag and drop XY Bar Chart (to display temperature and humidity) and XY Line Chart (to display trends) to the Mixed XY Chart.
3. Renaming Charts
Now rename xyLineChart1 to trends, xyBarChart1 to thsensor. To rename a component right-click it in the Resource Tree, choose the Rename item in the popup menu and enter a new name in the edit box appeared.
|
You can also rename a component using its work form popup menu. |
4. Configuring Sensor Chart
Let's send to back the thsensor bar chart to appear the trends line chart on foreground. So, select the thsensor chart in the Resource Tree and set a Z-Order property of the thsensor to 2 in the properties window.
Now, make the chart to display temperature and humidity of the thsensor Device. The temperature sensor has a variable temperaturei, containing an Integer temperature value in Celsius, multiplied by 10 (i.e. value 234 is 23.4 degrees Celsius) and a variable humidityi that is humidity value in percents, multiplied by 10.
Therefore, our thsensor chart will be based on variable data. 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 thsensor Device from the tree (it should be bold, as it is a default context) and click OK: |
The actual value for the 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: |
Accept the expression by clicking OK button. Leave other columns of the Source Variables dialog unchanged. So, you get the record for the temperature.
| • | Now, add and set up a second data series for the humidityi variable as you do for the temperaturei variable. |
Finally, here is what your variable data series should look like:
|
While adding a second source variables record by clicking Add Row ( |
5. Configuring Trends Chart
Let's configure our trends chart to display trend lines for the thsensor chart. First, in the properties window switch its Data Source Type property to Trending. Then, in the Trending tab select thsensor in the Source Chart Name property.
The trending chart will create a separate trend series for every series of the source chart. Let's now set custom trending series names: click Series Names property and add two rows with names Temperature Trend and Humidity Trend.
6. Cleaning Up
When a chart is configured for trending it uses the source's chart dataset to calculate trends and source's chart axes to display trend lines. So, we can remove trends chart axes were automatically added by putting the XY Line Chart (at the step 2) to the mixed chart.
| • | Select mixedXYChart1 in the Resource Tree. |
| • | Go to the Axes tab and click in the Range Axes property. |
| • | Select the second row in the appeared Range Axes dialog and press the Remove Row ( ) button to remove the unused domain axis. Click OK. |
| • | Do the same for the Domain Axes. |
| • | Also switch type for the remaining Domain Axis to Date Axis: click on the axis and set its Type in the Axis dialog appeared. |
7. Saving Chart Widget
Click Done (
) to finish editing and save the widget. It should appear in the System Tree:
8. 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. A new dockable window containing a widget with our chart will appear in AggreGate Client:
In this article you have learned how to combine simple charts within mixed chart for building trend lines. There are other capabilities of combining charts you can use in projects. See composite charts for further information.