Эта страница является переводом страницы Line Chart. Перевод выполнен на 98%.

Other languages:

Содержание

1 Line Chart
2 Setting up charts
- 2.1 1. Save the history of a feedback channel in iRidium server database
- 2.2 2. Display valuable history on a graph
3 Simple settings
4 Advanced settings
5 Setting the item with the help of JavaScript

Line Chart

Line Chart is a graph of variable changes where dots - variable changes are connected with a line.

the documentation was last updated on 09.11.2024

The feature is available from 1.3.70 version

Line Chart is a graph of variable changes where dots - variable changes are connected with a line. Changes of several values can be displayed on a graph. Unlike the Linear Trend item, Line Chart has a feature of gesture control.

The chart displays values from the iRidium server database. Some Line Chart parameters are available for modification in the script.

i3 pro does not store its own database, so the charts display information received from iRidium server.

Setting up charts

Setting up saving the history of changes in a feedback channel in the iRidium server database
Setting up the display of history on the chart: creating Line Chart graphic items in the i3 pro interface and assigning to them several feedback channels which history will be displayed.

1. Save the history of a feedback channel in iRidium server database

A driver feedback channel or a virtual feedback channel can be written in the database.

To save the change history, configure the variable to be saved to the server database. You set up it in the server project. When the variable is saved to the database, its change chart can be requested from the i3 pro application. The chart will combine historical and current data depending on the settings of the Line Chart graphic item.

You set up the display of the chart in the project for the control panel.

Create a variable to be displayed on the chart. Set up saving the variable to the database in the iRidium Server project.

Parameters for saving data in the database:

Persist – save the last value written in the variable and reproduce it after restarting the server before the drivers are initialized. With the help of this parameter values are loaded without abrupt "downs", but the fact of restarting or turning off the server is not fixed in the graph.
Store In DB – turn on saving a variable in the database, select a data format
- None – saving in the database is turned off
- Signed 32bit – save as a signed integer number
- 'Float 64bit – save as a floating point number
- String UTF8 – save as a string
Load On Start – write the last value of the variable from the database in the feedback channel when a server is launched
DB Save Strategy – a strategy if saving data: select a type of event which is saved in the database:
- Deadband– saving when a variable changes at a value different from the prevous one by a set value or more.
  - Deadband(value) – the minchange of a variable, that is written in the database.

In Deadband: 0 any value is written in the database and nothing is written if the same number comes to a value. But, if data are written as a string, they are saved every time, as strings are not compared.*

- Interval – saving periodically. Data are written with a set time interval.
  - Interval (Value) – select an interval from 5 seconds to 1 hour, or enter it manually (Custom) in ms If String UTF8 is selected in Store In DB, data are saved once a minute, more frequent saving can't be set (Use Deadband strategy)
  - Interval Value - a value of the interval (min 1);
  - Interval Units - measure units;
Forward value to - forwarding a value from one tag to another one(read more here);

Saving at an interval is convenient for variables that change the values smoothly and are quite inactive, for example, temperature and humidity of air.

Saving "at a change" is suitable for variables for which it is important not to miss the moment they are changed. For example, turning on/off the light, changing the speed of fan rotation can be saved in the database.

2. Display valuable history on a graph

1 Create a panel project from the server project or synchronize the current one.

2 Create Line Chart graphical item in the i3 pro interface and assign to it a server feedback channel, the history of which must be displayed:

Simple settings

Double click on an item opens appearance settings of a graph and each curve:

Name – the name of a curve
Tag – server variable from which a graph gets data to build a curve
Line type – a type of a curve
- Solid line – dots of a curve are connected with lines, it's a solid line
- Dotted line – dots of a curve are connected with lines, it's a dashed line
- Square line – a curve is built in steps from a dot to a dot, the line is solid
Width – the width of a line or a dot
Line color – the color of a line
Fill color - fill color of the area under the graph line
Background color - the color of the graph area
Text color - the color of data text located on the axes
Grid color - the color of the grid
Range – range of values on the time axis
Auto-scaling – auto-scaling is set from the lower to the upper value of the curve on the interval
Min ... Max (if Auto-scaling is on) – a fixed range to display data
Advanced settings - it is used to switch modes of the window with settings

Advanced settings

Activate the “Advanced settings” checkbox to open detailed settings, which are divided into tabs:

1. Chart lines:

Name – the name of a curve
Tag – server variable from which a graph gets data to build a curve
Line type – a type of a curve
- Solid line – dots of a curve are connected with lines, it's a solid line
- Dotted line – dots of a curve are connected with lines, it's a dashed line
- Square line – a curve is built in steps from a dot to a dot, the line is solid
Width – the width of a line or a dot
Line color – the color of a line
Fill color - fill color of the area under the graph line

2. Chart area

Chart background color - the color of the chart area
Axis background color - the color of the area under the axes
Show border - it enables display of the frame
Width - the width of the frame line
Color - the color of the frame
Gesture control settings
- Scroll chart
- Zoom in/out chart

3. Grid lines

Color - the color of the grid lines
Width - the width of the grid lines
Major gridlines - the main grid by the number of marks on the Y axis
Minor gridlines - additional grid
Number of additional lines

4. Horizontal axis

Range – range of values on the time axis
Position – location of the time axis: on the top or bottom of the graph
Color – axis line color
Width - the width of the axis lines
Show axis - it activates the display of the axis, the Axis Name Settings and Time and Date Label Settings
Axis name settings - settings for displaying and styling the axis name
- Show axis name - it activates the display of the name and its settings
Time and Date Label Settings - settings for displaying and styling the time text
- Show time and date - it activates the display of time and date on the axis

5. Vertical axis:

Auto-scaling – auto-scaling is set from the lower to the upper value of the curve on the interval
Min ... Max (if Auto-scaling is on) – a fixed range to display data
Position - location of the data axis: on the left or right of a graph
Marks quantity - marks on a graph with a set interval (integer number)
Axis name settings - settings for displaying and styling the axis name
- Show axis name - it activates the display of the name and its settings
Settings of the axis value labels - settings for displaying and styling data text

Show time and date - it activates the display of time and date on the axis

Example: https://drive.google.com/file/d/1aVJ9UOnORL2XsxN817QTyx9QvvNJKGn-/view?usp=drive_link

Setting the item with the help of JavaScript

Feedback from Live chart mode:

function CheckForLive () {
   IR.GetPage("3 AI").GetItem("Item 10").Value = Trend.Live //.Live - динамический ли график ("живой"); И чтение и запись

Switching time axis scales:

Trend.SetScale(IR.TREND_SCALE_DAY), instead of DAY there can be MONTH, WEEK and all available scales.

function SetScaleHour() { 
    IR.Log(Trend.Range);
    Trend.Range = 0.045; //.Range - диапазон (в иридиум тайм);
    IR.Log(Trend.Range);
}
 
function SetScaleDay() {
    Trend.SetScaleType(IR.TREND_SCALE_DAY); //.SetScaleType(type) - Установить тип масштаба - (день)
    IR.Log(Trend.Range);
}
 
function SetScaleWeek() {
    Trend.SetScaleType(IR.TREND_SCALE_WEEK); //.SetScaleType(type) - Установить тип масштаба - (неделя)
    IR.Log(Trend.Range);
}
 
function SetScaleMonth() {
    Trend.SetScaleType(IR.TREND_SCALE_MONTH); //.SetScaleType(type) - Установить тип масштаба (месяц)
    IR.Log(Trend.Range);
}

Shifting the viewed area of the chart along the OX axis relative to the current position:

Trend.Shift(-1) the argument specifies how many scale units relative to the current position to shift

function shift_back(){
  Trend.ShiftOnPixels(-1000, 100) //.ShiftOnPixels(count, speed) - Пролистнуть на кол-во пикселей. Если count положительный - вправо, если отрицательный - влево; speed - скорость листания в пикселях >=0; Если 0 - резкое перемещение, без плавного листания.
}
 
function shift_forward(){
  Trend.ShiftOnPixels(1000, 100) 
}

Return to the default range view, the most current point of the chart and Live mode: Trend.Reset()

function ResetTrend() {
    Trend.Reset(); //.Reset() - Сбросить к первоначальным настройкам (Заданным в студии)
}