Parameterization of Graphs
This tutorial aims to assist users of the thingable platform! in the process of editing objects are responsible for the passage of dynamic parameters to widgets, used within the applications built by the end user.
To make graphical and functional changes to the graph widgets it is necessary to edit the json code responsible for the parameters. In this way, you will need to access the platform through a user with an "admin" permission level. This user level allows editing applications as shown in Figure 1.
The platform has two levels of users: "admin" and "user". "Admin" users have access to all features of the platform. For users of the "user" type, the access permission to the platform resources is performed by configuring the user permissions in the tool. Users.
Configuring charts through the History Graph widget
To access the application in edit mode, you need to right-click on it, and then click on "Edit Content". The application will be opened in editing format, at this time, we can see that all graphic elements have a dotted outline that indicates the possibility of being moved to some space available in the application. It also allows editing the settings of widgets that are already present.
The graphs (History Graph widget) are parameterized through a json object that loads all pertinent information. There are two ways to enter this parameterization:
1. Within the "Json Data" field, you can open the edit option of the History Graph widget. In this mode the configuration is static, that is, the graph will show data referring only to the settings defined in the widget.
2. Using the "Use Tag" option, in this mode the parameterization is referenced by means of an object within the menu filter. This option is useful to show data in the graph according to the device chosen in the menu.
The following figure shows how to access the editing menu of the widget. In this image it is possible to identify the two parameterization fields mentioned in the previous topics.
It is worth remembering that the two available parameterization paths are mutually exclusive. That is, the user must enter the static parameterization in the "Json Data" field, or use the "Use Tag" dynamic option. The latter is explained in more detail in the following section. If you choose to use a static parameterization in the graph, we provide, at the end of this document, attached, an example of parameterization in json.
How to configure dynamic parameterization?
If you choose to use the "Use Tag" option to parameterize the graph according to the current menu selection, it is necessary, at first, to add a parameterization object within json, in the menu filter of interest. To do this, right-click on the app menu for the frame where the chart you want to configure is located, and then click on "Settings", as shown in Figure 3.
To know which parameterization object is referenced for the chart of interest, you need to open the chart edit menu. Once identified, it must be located in the menu filter, inside the "items" object, as shown in Figure 4.
By default, no thingable! use the notation “graph1”, “graph2”, “graph3”, etc. But other names can be used by the user.
The following section presents details of the main parameterization objects. Each of them should be changed according to the user's needs. The options listed below can be used regardless of whether the parameterization is of the static or dynamic type.
What can I edit on a chart?
It is possible to change several visual aspects such as line colors, point format, curve names, engineering units, graph style (line or bars), discontinuity of curves and groupings through calculations (punctual data in the daily view, and daily arithmetic average of the values in the monthly view, for example). All of these options are changeable through the objects listed in this section.
When expanding an object in the graph, two other objects are displayed: "group" and "series":
a) group:
Gathers general settings applicable to all data series (variables). The settings within "group" are:
useRealTime: the options are true or false. indicates whether the graph will be updated with data coming from SCADA.
useAutoUpdate: the options are true or false. indicates whether the chart will update automatically based on receiving new data.
intervalAutoUpdate: must be filled in with the desired period (in milliseconds) of chart update.
interval: indicates the maximum interval (in milliseconds) allowed between two points on the graph, before an interruption in the line between these points occurs. This option is valid when using the line graph visualization.
timeTabConfig: this object is used to parameterize the "Time" tab in the chart. This tab allows you to view the latest chart data in the form of sliding windows, which display the values of the last x hours. The X axis is resized so that the space is used to show the information only at times when there was data recording. In the "Diary" tab, in turn, the X axis shows the data available on a scale of 0 23 hours ago, regardless of when these records were made. In this object the available parameterizations are:
initDefaultHours: must be filled with a positive ink cartridge from 1 to 23. Sets the time interval (in hours) that the X-axis will show decreasing from the current moment. This setting loses effect when the "first Data Register" option is marked as "true".
firstDataRegister: he options are true or false. indicates that the time interval on the X axis contemplates the entire period that has data on the current day, this about the configuration defined in "initDefaultHours".
slidingWindow: options are true or false. If set to "true" a sliding window effect will be applied to the graph, that is, the time interval shown will not exceed that set in the "initDefault Hours" property when the screen is kept open. However, this will only work if the "firstData Register" property is set to "false".
time: indication of what type of graph is used in viewing the time tab. The options are "line" or "column".
day: indication of the type of graph used in viewing the daily tab. The options are "line" or "column".
month: indication of what type of graph is used in viewing the monthly tab. The options are "line" or "column".
year: indication of what type of graph is used in viewing the annual tab. The options are "line" or "column".
b) tv-shows
It consists of a vector containing all the variables that will be present in the graph of interest. The positioning order of these objects in the vector will be the same order to be shown in the graph legend. To change the parameterizations of a specific variable, the object of interest must be found in the vector that will have the following ooc6es available:
tag: tag for variable. This information is available in the "SCADA Database" tool.
alias: name, the user's choice, for the variable to be shown in the graph.
calc: allows you to replace the query used to fetch data from the database with a custom query. In this field, we must put the name of the custom query. This query is registered in the "Service Configurator" tool, in the "HistoricalServices" tab. In Serviço de História we have a json object used to parameterize other platform services, the "calc Expressions" object is used to store bespoke queries, which can be used in graphics. For example, in the following figure we have five user-defined queries: sat_1, sat_2, sat_3, sat_4, sat_5. The name and structure of the query can be defined according to the needs of the user. However, these changes should be performed very carefully, because if there are implementation errors in the inserted queries, all services that depend on the "Service Configurator" will stop working. The columns searched in the database, and used by the charts, are tag, value date time, and the parameters $1, $2 and $3 are respectively the tag, start date and end date, coming from the report widget interface.
symbol: engineering symbol for the variable.
decimalPlace: number of decimal places expected for the values shown in the graph.
labelColor: defines the color of the legend and the curve, the color code to be inserted can be in rgb or hex notation. There is also the option to use the color editor of the editing tool.
yAxis: defines the automatic adjustment behavior of the y-axis. The parameters available in this object are:
max: possible values are null or a number (integer or floating point). If marked as null, the scale in the graph will be resized automatically, according to the maximum values reached in the graph. If any number is used, the scale will not exceed this set maximum value.
min: Possible values are null or a number (integer or floating point). If marked as null, the scale in the graph will be resized automatically, according to the minimum values reached in the graph. If any number is used, the scale will not exceed this set minimum value.
group: defines operations of grouping data by profiles. For example, to view daily and usually do not do any grouping, the data is shown raw. In the monthly view, the average of that variable is usually used on the days of the month of interest. For the annual visualization, the average of that variable is used in the months of the year of interest. Check the image below:
The available options are:
time:
type: grouping type. The options are "normal", "avg" and "sum", which consecutively refer to normal, mean values and sum of values.
defaultClick: • sets whether the variable will be visible by default when the chart is opened.
day:
type: grouping type. The options are "normal", "avg" and "sum", which consecutively refer to normal, mean values and sum of values.
defaultClick: sets whether the variable will be visible by default when the chart is opened.
month:
type: grouping type. The options are "normal", "avg" and "sum", which consecutively refer to normal, mean values and sum of values.
defaultClick: sets whether the variable will be visible by default when the chart is opened.
extract: data grouping level: For example, to view the average values for a variable in the monthly view the "extract" must be "day".
year:
type: • grouping type. The options are "normal", "avg" and "sum", which consecutively refer to normal, mean values and sum of values.
defaultClick: sets whether the variable will be visible by default when the chart is opened.
extract: level of data grouping. For example, to view the average values for a variable in the annual view the "extract" must be "month".
Annex I - Example of static parameterization in json
Authors: Angelo Guimarães
Jonathan Veloso
Last updated
