i4designer Knowledgebase

Charts

Abstract

Here are the i4designer Charts components for your new project created on the i4connected platform.

The i4designer Charts category features the i4connected platform specific charts. More details can be found in the upcoming article.

Analysis chart
Abstract

Check out this article in order to learn more details about the i4designer Analysis chart component and the properties it features.

The i4designer Analysis chart component provides the user with possibility to graphically represent certain i4designer charts, on basis of an i4connected Objects Filter. More details about the configuration properties, can be found in the table below:

Analysis_chart.jpg

The Analysis chart component

Category

Property

Description

Configuration

Aggregate totals

If the toggle button is set to true all the measurements of the respective media and KPIs will be summed up.

Aggregate_totals.jpg

Auto update

Allows the user to specify whether the updating should happen automatically or not. When this option is enabled the chart pulls interval for data and updates it automatically. The Filter object property must be also filled, when enabling the Auto update property.

Auto_update.jpg

Chart date format

Selects the time and date format for the DateTime Signal values. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

For example: M/d/yyyy

Chart_date_format.jpg

Chart title

Sets the title of the chart component.

Chart_title.jpg

Chart type

Sets the type of the chart, selecting from the drop-down list options: line, bar or stacked bar.

Chart_type.jpg

Date range

Allows the user to set the date range span specifying when it starts and ends. The user can chose from the following drop-down options:

date_range.jpg
  • Specific (specific periods of time)

  • Offset (runs the current filter on a specified date in the past)

  • Current day

  • Current week

  • Current month

  • Current year

  • Last day

  • Last week

  • Last month

  • Last year

Direction

Sets the chart label direction measured in pixels. The value can be increased or decreased using the up / down arrows or manually added.

Direction.jpg

Display legend

Enables the chart legend display if property is set to True.

Display_legend.jpg

Display zoom area

Enables the display of the chart zoom area if property is set to True.

Display_zoom_area.jpg

End date

Sets the end date of the chart measurement. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

End_date.jpg

Filter object

Allows the user to apply the i4connected chart parameters. When adding the Filter object, the Auto update property should be also enabled.

The Filter Object can be selected by clicking the Expand the list button.

Expand_the_list_Filter_object.jpg

The Entities area is expanded, listing all the Object Filters available for the current project.

Entities_area.jpg

For large lists of Object Filters, the Entities area is also equipped with a simple search functionality.

After selecting the desired Filter, the view in this area is updated, to display the user's selection.

Applied_filter.jpg

Note

The Entities list does not allow multi-selection of items.

Kpi Ids

Allows the user with possibility to add the one or multiple KPI id(s). The KPI identification can be selected by clicking the Expand array button.

Expand_array_KPIs.jpg

Next, an Add button is displayed. By clicking it, the view is expanded to display the "Empty item" area. By clicking the Expand the list button, the list of KPIs, synchronized from an i4connected environment, is displayed.

Select_KPI.jpg

After choosing the desired KPI, the user can either remove it, via the Delete button, or decide to ad another KPI, via the upper Add button.

Multiple_KPis.jpg

Min Grid Distance

Sets the minimum distance supported by the chart grid.

Min_grid_distance.jpg

Resolution

Allows the user to select the resolution of the data rendered in the chart (the time interval between two consecutive measurements displayed on the time axis). The user can choose between five predefined resolutions (15 minutes, one hour, one day, one month and one year) or can set the option on Auto. When the Resolution is set to Auto, the system automatically adjusts the resolution based on the active Time range setting and the current zoom level.

Resolution.jpg

Start date

Sets the start date of the chart measurement. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/docs/#/parsing/string-format/.

Start_date.jpg

Tooltip date format

Allows the user to set the format of the date tooltip.

Tooltip_date_format.jpg

X axis toltip disabled

Allows the user to enable / disable the tooltip of the X axis.

X_axis_tooltip_disabled.jpg

Y axis min width

Allows the user to set the minimum width of the Y axis.

Y_axis_min_width.jpg

Y axis tooltip disabled

Allows the user to enable / disable the tooltip of the Y axis.

Y_axis_tooltip_disabled.jpg

Alarms

End offset

Allows the user to specify the end length offset measured in seconds, minutes, days, weeks, months or years.

End_offset.jpg

End offset interval

Allows the user to set the end offset interval.

End_offset_interval.jpg

Start offset

Allows the user to specify the start length offset measured in seconds, minutes, days, weeks, months or years.

Start_offset.jpg

Start offset interval

Allows the user to set the start offset interval.

Start_offset_interval.jpg

Update rate

Allows the user to specify the update rate in milliseconds. This property will be taken into consideration only if the Alarms Mode is set to Online.

Update_rate.jpg

Appearance

Padding right

Sets the right padding of the component. The padding value is expressed in pixels, allowing the user to either manually fill in the desired value or by using the up / down arrows.

Padding_right.jpg

Layout

Layout mode

Sets the behavior of the element to either disabled (grayed out) or hidden, when the logged in user doesn't meet the conditions imposed by the Roles and Permissions properties.

Layout_mode.jpg

Margin

Sets the margin of the component relative to the drawing board area. The supported values are the standard CSS values for the margin.

The top, bottom, left and right values can either be typed in the main property field or by using the Margin editor.

Margin_small.jpg

The Margin editor can be opened by clicking the Open button.

Margin_large.jpg

The components margins can be updated by setting the margin value and selecting the desired unit:

  • Ems (em) - The em is a scalable unit. One em is equal to the current font-size;

  • Pixels (px) - Pixels are are fixed-size units. One pixel is equal to one dot on the computer screen (the smallest division of a screen’s resolution).

  • Percent (%) - The percent unit is much like the “em” unit. When using the Percent unit the component remains fully scalable for mobile devices and accessibility.

Palette

Background color

Sets the background color of the chart. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the color of the component border. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Header background

Sets the background color of the chart header. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_background.jpg

Header foreground

Sets the foreground color of the chart header. The user can either manually type in the HEX color code or use the color picker tool.

As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Header_foreground.jpg

Typography

Header font family

Sets the font size of the chart title, displayed in the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_family.jpg

Header font size

Sets the font size of the chart title, displayed in the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

header_font_size.jpg

Header font weight

header_font_weight.jpg

Sets the font thickness of the chart title, displayed in the component header, selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Effects

Opacity

Sets the opacity of the component. The Opacity values should be numbers from 0 to 1 representing the opacity of the component. When the component has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

By default, the Component's opacity is set to value 1. Using the up / down arrows the user can control the opacity degree.

Opacity.jpg

By clicking the Open button the view is extended to display the Opacity slider.

Opacity_slider.jpg

Shadow color

Sets the color of the component's shadow. The user can either manually type in the HEX color code or use the color picker tool.

Shadow_color.jpg

Shadow offset X

Sets the offset of the shadow on the horizontal axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_X.jpg

Shadow offset Y

Sets the offset of the shadow on the vertical axis. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_offset_Y.jpg

Shadow size

Sets the width of the component shadow. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Shadow_size.jpg

Transform

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg