
General Plot Screen
Trending requires database to be running at server. After database is configured, to plot a trend for a tag is as simple as selecting the database for the desired tag to plot.

Select a tag to log into database
Trending can be initiated by javascript function called trend() within an HTML file with a single DIV tag. Below is the complete snippet including configuration that will load a trending screen.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" media="screen" href="system/styles/igrX.css"/> </head> <body> <div class='trend' id='placeholder'></div> </body> <script type="text/javascript" src="system/scripts/igrX.js"></script> <script type="text/javascript"> var pen = [ { name: 'Temperature', enabled: true, unit: 'Celsius', min: 0, max: 100, pens: [ { name: 'Temperature Cook', tag: 'temperature_cook' } ] } ]; var opt = { lograte: 5000, backgroundColor: 'white' }; var plot = new trend( '#placeholder', { 'pen_setting': pen, 'option': opt }); </script> </html>
There are two arguments required: DIV to append and setting. The function call will append the chart to a DIV object with ID "placeholder".
var plot = new trend( "#placeholder", { "pen_setting": pen, "option" : option });
Setting is a JSON object that consists of 2 child objects, called pen_setting (Array) and option (JSON). In pen_setting, user is required to enter basic configuration of the pens that will be shown in the trend graph. A sample of pen_setting configuration for Temperature and Pressure is as per below:
var pen = [ { name: "Temperature", // (String) enabled: true, // (Boolean) unit: "°C", // (String) min: 0, // (Number) max: 100, // (Number) pens: [ { name: "Temp A", // (String) tag: "temp_a", // (String) type: "step" // (String) *Optional }, { name: "Temp B", // (String) tag: "temp_b" // (String) }, { name: "Temp C", // (String) tag: "temp_c" // (String) } ] }, { name: "Pressure", // (String) enabled: true, // (Boolean) unit: "kPa Abs", // (String) min: 0, // (Number) max: 10, // (Number) pens: [ { tag: "press_a" // (String) } ] } ];
Each element in pen_setting is a parameter to a number of tags. For each parameter, user is required to enter details for the particular parameter.
Field |
Data Type |
Description |
---|---|---|
name |
String |
Name of the parameter, e.g. Temperature. |
enabled |
Boolean |
To show(true) / hide(false) the parameter upon startup. Default to true if not specified. |
unit |
String |
Unit of the parameter, e.g. Celsius. |
min |
Number |
Minimum value of the parameter. |
max |
Number |
Maximum value of the parameter. |
setPoint |
String |
Tag name of the set point. Value of the tag will be taken as set point. Set point is a horizontal reference line for a parameter. |
setPointColor |
String |
Color for the set point horizontal reference line. |
pens |
Array |
Contains the pens under this parameter. |
Pens is an Array that consists of JSON objects, while each of the JSON objects is a configuration of a pen.
Field |
Data Type |
Description |
---|---|---|
name |
String |
Label of the pen. Default to tag if not specified. |
tag |
String |
Tag of the pen. |
enabled |
Boolean |
To show/hide the pen on startup. If it is not specified, it will inherit from parameter setting. |
type |
String |
This is an optional field. If the value "step" is specified, the line plot will be plotted in step line format. |
format |
String |
This is an optional field. If specified, the tag value displayed will follow the format provided. For eg. 1.2 will be displayed as 1.200 if "0.##0" is specified. 1.2345 will be displayed as 1.23 if "0.#0" is specified. For boolean typed tag, the format can be specified as "TRUE/FALSE", in which TRUE will be displayes when the value is true and vice-versa. |
color |
String |
This is an optional field. If specified, the line plotted will use the color specified.The color should be specified in HTML color format. For example: "#FF0000" |
![[Tip]](images/tip.png)

Step Trending
Second object is called option . Option is where the user set various general setting to the chart. Below is an example:
var option = { lograte: 5000, backgroundColor: "white" };
Field |
Data Type |
Description |
---|---|---|
gridx |
Number |
Number of X-axis grid to display. Default to 10 if not specified. |
gridy |
Number |
Number of Y-axis grid to display. Default to 10 if not specified. |
legend |
Boolean |
To show legend on top right corner of the graph. Default to false if not specified. |
length |
Number |
Startup length of the plot in term of time span. Default to 600 (second) if not specified. |
realTime |
Boolean |
Startup status of trend. Default to true if not specified. |
lograte |
Number |
Log rate of the database in millisecond. Should be same as logging rate of database. |
source |
String |
Define the database table to plot. Default to "log" table if not specified. |
dbgroup |
String |
Define the name of database where the source is. This is reserved for report module. Default to "dblog" if not specified. |
skip |
Boolean |
To allow the trending system to skip data from database during each query, to display optimum number of points on screen. This is to prevent database from overloading. Default to false if not specified. |
breaklimit |
Number |
Define how many millisecond between 2 coordinates should consider missing data. If the time between 2 coordinates are greater than this value, line will not be drawn. Default to 2x lograte if not specified. |
backgroundColor |
String |
Back-ground color of chart. Default to white if not specified. |
refLineColor |
String |
Reference line color of chart. Default to black if not specified. |
All pens will be plotted in a graph, with respect to their own maximum/minimum configuration. Maximum/minimum value of the parameter, as well as color of the individual pens can be seen on a drop down window when the parameter on top panel is clicked. Maximum and minimum of a parameter can be changed by editing the text directly and press
.
Bookmark and Anchor
User can click on the graph to add a reference line. Any pen that intersect with the line will have a tooltip of value displayed. There are 2 types of reference line: Bookmark and Anchor. Bookmark will stick with the time stamp and eventually drift away in real time trending, while anchor will stay on the screen. When user clicked on the graph to add a reference line, a bookmark will be created (dotted line). User can convert the bookmark to an anchor by clicking on it once (static line). By clicking on the anchor again, the reference line will be removed.
Bookmarks and anchors are persistently stored. User can click on the rightmost icon in the navigation panel as pointed by the red arrow in the screenshot above to bring up the bookmarks side panel which will list out all the stored bookmarks and anchors. As shown in the screenshot, bookmarks are identified by its timestamp on the trending graph and anchors are identified by its relative distance (in percentage) from the left edge of the visible graph. A maximum total of 25 bookmarks and 25 anchors can be stored at any one time.
Navigation panel is located at the bottom. Buttons from left: Pan Left by Page, Pan Left by Grid, Pause/Play, Pan Right by Grid, Pan Right by Page, Zoom out, Zoom in. Other than using buttons, user can select specific time stamp by clicking on the date/time at bottom left or bottom right corner. A datepicker/timepicker will prompt for selection. If any end date/time earlier than a begin date/time is selected, the graph will do nothing but turn to historical mode. Ultimately, user can click and drag on any specific portion for zooming in.
![[Note]](images/note.png)
Any button clicked, or date/time changed will result in historical mode. Operator will need to click on "Play" button in order to resume in real time mode.
Advanced Javascript user can utilize the trend object created by calling the public functions of trend. There are currently 2 public functions exposed, i.e. setTimeStamp() and realTime() . setTimeStamp() takes in 1 parameter in Object format, where the element "bgn" is UNIX format of begin time while the element "end" is UNIX format of end time. realTime() takes in 1 boolean parameter, to force the graph into real time or historical mode. Calling realTime() without parameter will toggle between the 2 modes.
var new_time = { "bgn": 1270000000000, "end": 1271000000000 }; plot.setTimeStamp(new_time);
plot.realTime(false);
![[Tip]](images/tip.png)
An alternative method in placing the DIV other than using ID is using classname as reference. The parameter is a CSS selector of DOM, i.e, "#" represents ID and "." represents class name. So to use classname as reference, supply ".placeholder" as first parameter for trend() function call.