Эта страница является переводом страницы IRidium studio 2019 Trends. Перевод выполнен на 100%.

Содержание

1 Charts and diagrams
- 1.1 Linear Trends
- 1.2 Pie and Bar Charts
  - 1.2.1 Pie Chart
    - 1.2.1.1 Setting a Chart in iRidium Studio
    - 1.2.1.2 Setting a Chart with the Help of Scripts
  - 1.2.2 Bar Chart

Charts and diagrams

Linear trends are a way to display history data from the base of iRidium server or from anothe source.
Diagrams are a way to visually compare several values in a visualization interface.

Linear Trends

Linear Trend 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.

The graph displays values from iRidium server database from an external database or from an array formed with the help of JavaScript. Some parameters of a liner trend are available to change from the script.

i3 pro does not store its own database that's why graphs display information received from iRidium server.

Setting graphs

save history of changes in a feedback channel in iRidium server database
set display of history on the graph: create Linear Trend graphical item in i3 pro interface and assign to it a sever feedback channel, which history willbe 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. Settings of saving in the databasae are availabel in a logic project for iRidium server:

Parameters of 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);
On Server - turn on / of tag connection to the panel project (when a tag is off, it is not dsiplayed in the panel project and is not cnounted in licensing).

Saving at an interval is convenient for variable 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

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

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

General settings of a graph:

Horizontal axis (time)
- Range – range of values on the time axis
- Position – location of the time axis: on the top or bottom of the graph
- Make marks by – marks on the graph with an interval of sec/min/h/day
- Divisions between marks – number of divisons between marks
Vertical axis (data)
- Auto-scaling – Auto-scaling of the scale from zero to a received value or
- 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
- Make marks by – marks on a graph with a set interval (integer number)
- Divisions between marks – additional divisions between main marks
List of curves that a graph displays and its settings
- Name – the name of a curve, can be displayed on an axis
- Tag – server variable from which a graph gets data to build a curve
- Main curve (for Auto-scaling) – select a curve as the "main" for auto-scaling
- Line type – a type of a curve
  - 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
- Color – the color of a line

Setting chart area (Appearance):

Filling in the chart area and axis area
Horizontal axis (time): line, marks, divisions, text on divisions, axis name
Vertical axis (data): line, marks, divisions, text on divisions, axis heading
Cursor in chart area

See settings of chart area

Chart area. Fill in the chart area and axis area

Axis area – filling in the axis area, frame around axes
- Fill - filling
  - Color - fill color
  - Opacity - general inopacity of axis area
- Border - frame around axes
  - Color - border color
  - Width - border width
Chart area – filling in chart area
- Fill - filling
  - Color - fill color
  - Opacity - general inopacity of the chart area

Horizontal axis (time): line, marks, divisions, text on divisions, heading

Axis line and time scale – axis line and main marks
- Color – the color of the axis line and marks
- Mark size – the height of marks
Time on scale marks – time indication on the marks
- Show – show time indication on marks
- Template – a format to display time on marks
- Font - font settings and text color on the marks
- Indent from axis – text indent from the axis line, it depends on the height of marks and the size of font
Additional marks between scale marks – additional divisions
- Color – the color of additional divisions
- Mark size – the size of additional divisions
Axis heading – the heading of an axis
- Show – show heading
- Heading – text of heading
- Font - font settings and the color of the heading text

Vertical axis (data).: line, marks, divisions, text on divisions, heading

Axis line and time scale – axis line and main marks
- Color – the color of the axis line and marks
- Mark size – the height of marks
Time on scale marks – time indication on marks
- Show – show values on marks
- Template – a format to display values on marks
- Font - font settings and the color of text on marks
- Indent from axis – text indent from the axis line, it depends on the height of marks and the font size
Additional marks between scale marks – additional divisions
- Color – the color of additional divisions
- Mark size – the size of additional divisions
Axis heading – the heading of an axis
- Show – show heading
- Heading – the text of a heading
- Font - font settings and the colof of heading text

Cursor in chart area. (for Windows)

Show – show a cursor
Color – the color of a cursor
Hide in (ms) – hide after a set time of stand-by

Example:

download: setting charts for i3 pro and saving database for iRidium server

Filling in graph with data array from JavaScript

You can send data to a curve of a graph as a two-diamentional array that contains coordinates of the dots of the curve.

Example of array:

var l_aArray = [[0, 60], [1, 30], [2, 90], [3, 10], [4, 60], [5, 20], [6, 80]];

Example of realization:

function trend_processer(trend, curve_name) {
    var trend_curve = trend.GetCurve(curve_name);
    trend_curve.SetCurveTag("");    
    trend.EndTime = new iDate();
 
    this.Show = function (data_array) {
        trend_curve.SetData(data_array, 0, data_array.length - 1);
    }
}
 
// get a curve
var Curve1 = new trend_processer(IR.GetPage("Page 1").GetItem("Item 1"), 
            "Main curve");
 
// display data
Curve1.Show([[0, 60], [1, 30], [2, 90], [3, 10], [4, 60], [5, 20], [6, 80]]);

Resulting curve:

Filling in a Graph from an External SQL Database

To display data from an external database:

set ODBC driver in a project for iRidium server, add #1 script
create a virtual tag, via which adate from a server project are sent to a panel project
create an interface for i3 pro, add Linear Trend item to it to display data and script #2

script #1 for iRidium server:

IR.AddListener(IR.EVENT_START,0,function()
{  
IR.SetTimeout(2000, function(){
   var MySQL = new ODBC("root", "", "MySQLresurs"); // creating database connection object
   if(MySQL == false)
   {
      IR.Log("Wrong connection");
   }
   else
   {
      IR.Log("Right connection");
   }
   var response = MySQL.Query("SELECT * FROM test");
   if (response)          // if connection is successful and answer exists
   {
       var rows = response.GetRows();
       var columns = response.GetColumns();
       var data = {};               // two-dimension array with query result
       for (var i = 0; i < columns; i++) {
           var colName = response.GetColumnName(i);
           data[colName] = [];
           for (var j = 0; j < rows; j++) {
               data[colName][j] = response.GetRowValue(i, j);
           }
       }
    response.Free(); // free memory of recordset (optional action for memory optimization)
    IR.Log(JSON.Stringify(data));
    IR.SetVariable("Server.Tags.Data",JSON.Stringify(data));
    }
});
});

script #2 for i3 pro:

var l_oDevice = IR.GetDevice("iRidium Server");
var l_oPage = IR.GetPage("Page 1");
var l_oTrend = l_oPage.GetItem("Item 1");
var L_oCurve = l_oTrend.GetCurve("test"); 
var l_aArray = [];
 
IR.AddListener(IR.EVENT_TAG_CHANGE, l_oDevice ,function(m_sTag, m_sData) {
   if(m_sTag == "Data"){
      l_aArray = [];
      var m_oData = JSON.Parse(m_sData);
      for(var Index in m_oData["X"]){
         l_aArray[Index] = [m_oData["X"][Index], m_oData["Y"][Index]+0];    
      }
   }
});

download: Example of getting data via ODBC driver

Setting Trends with the Help of JavaScript

A Linear Trend, like any another graphic item, has its parameters that can be called directly from the script. Below there is an example of a scene that will display the start time of the trend work (StartTime) in the log:

var trend = IR.GetPage("Page 1").GetItem("Item 1"); // Getting a pointer to a trend.
IR.Log("Trend start:"+trend.StartTime); // Displaying the start time of the trend work as a decimal number .
var date = new iDate(trend.StartTime); // Conversion of the number into a date format.
IR.Log("Year = " + date.year);
IR.Log("Month = " + date.month);
IR.Log("Date = " + date.date);
IR.Log("Hours = " + date.hours);
IR.Log("Minutes = " + date.minutes);
IR.Log("Seconds = " + date.seconds);

The scene displays the range of the trend (Range) in the log:

date = new iDate(trend.Range);
IR.Log("RANGE = "+date.minutes);

If you want to change the range, that is to change the X axis, you have to change the value of the Range parameter:

trend.Range = 0.00138889; //For Range numeral 1 = 1 day, it means that 1 hour = 1/24 etc.

To change the settings of the OY axis, the name of the trend is required:

Enter the trend settings,
Go to the General tab,
Choose a required trend.

var graph= trend.GetCurve("Feedback 1"); //Getting a pointer to a required trend
//Logging data about the trend: 
IR.Log("Curve min:" + graph.Min); // The min value of the Y axis
IR.Log("Curve max:" +graph.Max); // The max value of the Y axis
IR.Log("Curve color:" +graph.Color); // The color of the trend

Change the parameters:

graph.Min = 0;
graph.Max = 75;
graph.Color = 0x00FF00FF; //Pay attention to a template of color change: 0x - conversion from HEX to DEС, the first 6 symbols are an RGB color palette, the last two are transparency (FF - non-transparent, 00 - totally transparent)

To view the history of changes of feedback parameters, use a function to view the trend history. This function helps to track changes without changing the mode of a trend.

function left() {
    trend.Stop; // The trend is stopped
    trend.StartTime = trend.StartTime-1/720; // A backward movement along the X axis
    trend.EndTime = trend.EndTime-1/720; // 1/720 - a 2-minute movement 
};
 
function right() {
    trend.Stop; // The trend is stopped
    trend.StartTime = trend.StartTime+1/720; // Forward movement along the X axis
    trend.EndTime = trend.EndTime+1/720;
};

See a detailed description of properties and methods to work with trends here.

Pie and Bar Charts

Charts are a visual way to compare several values in a visualization interface. They use current variable values and not historical values, that's why they can work without a iRidium server.

Pie Chart

Pie Chart is divided into sectors to illustrate numeric proportions. The length of the bend of each sector in a pie chart is equal to the value it represents.

Type	Pie Chart
SectorGap	A gap between sectors.
ConvasColor	The color of the item background, where the chart is located.
ConvasOpacity	Non-transparency of the item background from 0 to 255.
BorderColor	The border of the backgound part of an item.
BorderDepth	The width of the border of the backgound part of an item..
ChartSectors	Adding and setting sectors of a pie-chart. A chart is set with the help of scripts or by filling in parameters in iRidium Studio.

Setting a Chart in iRidium Studio

1 Open a window to set a pie chart with the help of a double click on an item or with the help of Sector gap parameter on the dynamic panel.

2 Click "+" to add a sector of a pie chart.

3 Set parameters of each sector of a pie chart:

Name - the name of a sector,
Token - a token, which value will be displayed on a pie chart,
Color - the color of a sector.

Example:

download: setting Pie Chart item in iRidium Studio.

Setting a Chart with the Help of Scripts

A chart is filled in from the script. A chart is sent an array of objects - sectors of a chart that have Value (value, integer) and Color (color, HEX code) keys. The value and the color can be controlled during client work by sending new values to the array object. The number of sectors canbe changed by adding and deleting items of the array.

Example #1 filling in a chart:

   var chart = IR.GetItem("PiePage").GetItem("pie");
 
   chart.Data = [
      {
        Value: 20,
        Color: 0xF7464AFF,
      },
      {
        Value: 45,
        Color: 0x46BFBDFF,
      },
      {
        Value: 100,
        Color: 0xFDB45CFF,
      }
   ];

Example #2 filling a chart with data from different sources:

// add a new Pie
var Pie_1 = new pie_processer(IR.GetItem("PiePage").GetItem("pie"));
 
// add a constant as piece of Pie
Pie_1.AddPiece("Orange", 0xFDB45CFF, 30);
 
// remove one of piecs
Pie_1.RemovePiece("Orange");
 
// change a pice on the level release
IR.AddListener(IR.EVENT_ITEM_RELEASE, IR.GetItem("PiePage").GetItem("level_1"), function() {
  var value = IR.GetItem("PiePage").GetItem("level_1").Value;  
  Pie_1.AddPiece("Red", 0xF7464AFF, value);
});
 
// one more piece that displayed on "tag change" of Driver
IR.AddListener(IR.EVENT_TAG_CHANGE, IR.GetDevice("KNX"), function(name,value) {
  if (name = "1/1/1") {
      Pie_1.AddPiece("Green", 0x2EFF0AFF, value);
  }
});
 
 
// processing of added PieCharts
function pie_processer(chart) {
   var piece = {};
 
   this.AddPiece = function (in_name, in_color, in_value) {
       piece[in_name] = {Color: in_color, Value: in_value};
       update_pie();
   };
 
   this.RemovePiece = function (in_name) {
       delete piece[in_name];
       update_pie();
   };
 
   function update_pie() {
      var data = [];
      for (key in piece) {
          data.push(piece[key]);
      } 
      chart.Data = data;  
  };                   
}

Bar Chart

Bar Chart – displays comparison of several values presented by rectangles, the height (length) of rectangles is equal to values they represent. The chart is filled in from the script.

A chart is filled in from the script. A chart is sent an array of objects - sectors of a chart that have Value (value, integer) and Color (color, HEX code) keys. The value and the color can be controlled during client work by sending new values to the array object. The number of sectors can be changed by adding and deleting items of the array.

Example #1 filling in a chart:

IR.AddListener(IR.EVENT_START, 0, function () {
 
    var chart1 = IR.GetItem("BarPage").GetItem("bar1");
 
    chart1.Data = {
            Labels : ["Value"], // text on the horizontal axis
            Datasets : [{
                FillColor : 0x0099CC80, // column color
                StrokeColor : 0xFF0004FF, // column border color
                Data : [100] // var value
            }, {
                FillColor : 0x9933CC80,
                StrokeColor : 0x00FF33FF,
                Data : [100]
            }, {
                FillColor : 0xFF33CC80,
                StrokeColor : 0xFF33CCFF,
                Data : [100]
            }]
    }
 
    chart1.ChartType = 1; // column / stack / square
    chart1.StrokeWidth = 3; // the width of a single column
    chart1.BarGap = 1; // the distance between columns
    chart1.SetGap = 8;
    chart1.GridColor = 0xFF0000FF; // the color of greed
    chart1.GridStep = 25; // the distance between greed lines
    chart1.ShiftX = 10; // the diatance betweeenhorizontal axis and columns
    chart1.TextColor = 0xFF0000FF; // the color of labels and greed numbers
});