Skip to main content

Line Chart

The Line Chart element allows visualizing the evolution of one or more variables in a Cartesian diagram. It is fundamental for analyzing trends, monitoring continuous processes, and comparing the behavior of different signals simultaneously.

This component features two primary operating modes, configurable via the Data type property in the Advanced tab:

  • Historical: Displays data previously saved in the system's variable history record, allowing for the consultation of variable trends over past periods.
  • Real Time: Represents variable values live as the system receives them, providing an immediate view of the process's current behavior.

Properties marked with bolt allow dynamization from an expression with variables.

General​

Basic identification and position configuration.

Name (string)​

Unique identifier of the element.

Description (string)​

Optional descriptive text.

X bolt (number)​

Horizontal position in pixels.

Y bolt (number)​

Vertical position in pixels.

Z bolt (number)​

Depth index (z-index).

Width bolt (number)​

Width of the element in pixels.

Height bolt (number)​

Height of the element in pixels.

Style​

Visual customization of the component and its interface.

Hidden bolt (boolean)​

Makes the element invisible.

Color bolt (color)​

Main color applied to the chart elements.

Background Color bolt (color)​

Background color of the chart area.

Interface Color (color)​

Color for interface elements such as axes and background grids.

Button Color (color)​

Color applied to the widget's own user interface buttons.

Border Color bolt (color)​

Global border color.

Border Color [Top/Bottom/Left/Right] (color)​

Allows defining specific colors for each side of the border.

Border Radius bolt (number)​

Corner rounding of the container in pixels.

Border Width bolt (number)​

Global border thickness in pixels.

Border Width [Top/Bottom/Left/Right] (number)​

Specific thickness for each side of the border.

Border Style bolt (string)​

Global stroke type (Solid, Dotted, etc.).

Border Style [Top/Bottom/Left/Right] (string)​

Specific stroke type for each side of the border.

Font Size (number)​

Text size for labels and axis values.

Rotate bolt (number)​

Rotation angle of the element in degrees.

Transition (string)​

CSS transition definition for animating state changes.

Anchor Point [Vert./Horiz.] (string)​

Defines the reference position relative to the vertical and horizontal axes.

Shadow bolt (string)​

Predefined shadow style (None, Small, Medium, Large).

Advanced​

Configuration of data behavior and widget functionalities.

Control buttons (boolean)​

Enables the display of two interaction buttons at the bottom of the chart that facilitate data analysis:

  • play_arrow Play / pause Pause Stops or resumes the real-time movement of the chart. This prevents the chart from advancing, making it easier to zoom (using the mouse scroll) and navigate through the timeline (using drag and drop) to inspect specific data points. Note: This button is only functional when the Data type is set to Real Time.
  • replay Restart: Instantly resets the chart view, clearing any applied zoom and returning to the initial position on the timeline. It is very useful for quickly returning to the standard view after exploring the data.

Date filter (boolean)​

Enables two date and time selection fields (From and To) at the top of the chart. This functionality is exclusive to the Data type set to Historical.

  • Smart Operation: When applying a filter, the system checks if it already has the required data. If not, it performs an automatic query to the server to fetch and display them. If the data were already downloaded previously, the visualization is instantaneous, optimizing performance and network consumption.
  • Initial Load: By default, when the component loads, it displays data for the period between the current date and the time defined in the Width (in seconds) property.
  • Performance Considerations:
    • Very wide date ranges may increase response time due to the volume of information to be processed.
    • Loading speed also depends on the sampling interval configured in the variables' history; a very low interval implies higher data density and therefore heavier queries.

Show legend (boolean)​

Displays an interactive legend that identifies each data series by its name and color. By clicking on any item in the legend, the corresponding data series can be instantly hidden or shown, making it easier to clean up the chart area and focus the analysis solely on the variables of interest.

Show value on line (boolean)​

Enables an informative popup window (tooltip) that appears when hovering the mouse pointer over the data series. This window synchronously displays the exact numerical values of all lines present at that precise instant in time, facilitating the accurate reading of data points without needing to estimate their value on the vertical axis.

Data type (string)​

Determines whether the chart shows current or past information:

  • Historical: Retrieves values saved in the system's historical database. This mode allows using the Date filter to query any previous period. It is useful for analyzing past failures or reviewing trends from previous days.
  • Real Time: Shows live data as it arrives, and the chart advances automatically. It allows using the Play / Pause button to stop the time progression and calmly observe the current data.

Data Series (Array)​

Configuration of the signals represented on the chart. For the element to function correctly, it must contain at least one defined series. Although as many as necessary can be added, keep in mind that a very high number of series could impact performance. Each series allows for the configuration of:

  • Variable: Selection of the Tag whose values are to be represented.
  • Color: Allows choosing a custom color to identify the series line on the chart.
  • Y Scale: Allows associating the series with one of the two previously defined vertical scales, thus determining its representation range.

Y Scale (Array)​

Defines the vertical axes used to represent the series values. The chart allows for the configuration of up to a maximum of two scales (left and right), which is ideal for comparing variables with different ranges or units. Each scale has the following properties:

  • Name: Label that will appear at the top of the axis to identify the scale.
  • Unit: Text (such as %, Unit, ºC) displayed next to the axis values to provide context for the represented magnitude.
  • min / max: Define the numerical range (lower and upper limits) that the scale will cover on the chart.

Interval (seconds) (number)​

Optional property that defines the frequency with which the chart plot is updated.

  • Operating Mode: This setting is only effective when the Data type is set to Real Time.
  • Performance: Setting very small intervals can overload the browser and affect visualization performance.
  • Limitations: Reducing this value does not make the system read data faster. If the interval is lower than the variable's actual change rate, the chart will display redundant or repeated data points.

Width (in seconds) (number)​

Defines the time window displayed by default on the horizontal axis (X-axis).

  • Initial Data Loading: This value determines how much historical data is automatically downloaded when the chart opens. It applies to both Historical and Real Time modes, allowing for the immediate visualization of recent variable trends without waiting for new data to be received.
  • Performance Impact: It should be used with caution; setting an excessively large time width will force the system to process a greater number of records during initial loading, which can increase response time and decrease chart fluidity.