Line Graph
The Line Graph object is used to display data or two different things on a graph. The object works basically like the time graph object.
App Builder Object
In Ports
Position | Name | Message | Description |
|---|---|---|---|
1 | Label | String | This port is used to give the graph a name or header |
2 | Data | Array | This port is used to get data points for the x and y axis which will then be implemented into the graph |
3 | X Label | String | This port is used to give the x axis a name |
4 | X Min | Number | This port is used to set the minimum displayed x axis value |
5 | X Max | Number | This port is used to set the maximum displayed x axis value |
6 | Y Label | String | This port is used to give the y axis a name |
7 | Y Min | Number | This port is used to set the minimum displayed y axis value |
8 | Y Max | Number | This port is used to set the maximum displayed y axis value |
Properties
Name | Description |
|---|---|
Object Name | The name of the object on the canvas |
Dashboard Label | Give the object a name on the dashboard |
Dashboard Group | Assign a dashboard group |
Example
We are now giving some inputs for the line graph ports to understand how the object works.
Port | Default Value |
|---|---|
Label | Graph 1 |
Data | - |
X Label | X-Axis |
X Min | -10 |
X Max | 10 |
Y Label | Y-Axis |
Y Min | 10 |
Y Max | 10 |
It should look like this.
As you can see all the values we changed can be seen when the app is run in the dashboard.
Another way to use the Line Graph object is to connect it with Historic Data object. Have a look at the following example.
We are using 3 Button objects and two Input Number objects. One Button object is connected to the Historic Data Delete object. By pressing that Button all the stored Historic Data will be deleted. The Historic Data Write object is used to store new data by adding a x and y coordinate and adding it by triggering the object via a button. Lastly to load the Historic Data we stored before into our Line Graph object we need the Historic Data Read object. When triggered it will give an array as an output and send it to the Line Graph object where all the data points we added before via the Historic Data Write object will be finally displayed.
You can see three buttons now, two numbers and the graph itself. To get an entry simply select a number for the x value and one for the y value. Then click “Write” to store the data in the object. After that click “Load Data” to display the data point in the Line Graph.
Next step we are going to add another data point. The Line Graph will connect all those added data points.
Adding another datapoint.
If you want to clear the graph, click the “Clear” button. This will clear all the data but only when you upload new data points to the Line Graph. So we hit “Clear”, chose 0 for x and y coordinate, click “Write” and then click “Load Data”. As you can see all data points before are deleted. With the Historic Data Delete object you can also delete only specific data points.