Charts
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
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 a manually inserted Filter. The Analysis chart filter needs to provide a certain set of parameters. More details about the configuration properties, can be found in the table below:
The Analysis chart component
Category | Property | Description |
|---|---|---|
Miscellaneous | Aggregate totals | If the toggle button is set to true all the measurements of the respective media and KPIs will be summed up.  |
Area ids | Allows the user with possibility to add one or multiple Area identification numbers, by clicking the Add item button.  By clicking the Expand array list button, all the added array items are displayed.  Further on, the user can add an Area for each Array item.  The following actions are available for each array item:
| |
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.  | |
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 title | Sets the title of the chart component.  | |
Chart type | Sets the type of the chart, selecting from the drop-down list options: line, bar or stacked bar.  | |
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: 
| |
Device ids | Allows the user with possibility to add one or multiple Device identification numbers, by clicking the Add item button.  By clicking the Expand array list button, all the added array items are displayed.  Further on, the user can add a Device for each Array item.  The following actions are available for each array item:
| |
Direction | Sets the chart label direction measured in pixels. The value can be increased or decreased using the up / down arrows or manually added.  | |
Display legend | Enables the chart legend display if property is set to True.  | |
Display zoom area | Enables the display of the chart zoom area if property is set to True.  | |
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/.  | |
Filter object | Allows the user to manually insert the i4connected chart parameters.When adding the Filter object, the Auto update property should be also enabled.  | |
Kpi ids | Allows the user with possibility to add one or multiple KPI identification numbers, by clicking the Add item button.  By clicking the Expand array list button, all the added array items are displayed.  Further on, the user can add a KPI for each Array item.  The following actions are available for each array item:
| |
MinGrid Distance | Sets the minimum distance supported by the chart grid.  | |
Org unit ids | Allows the user with possibility to add one or multiple Organizational Unit identification numbers, by clicking the Add item button.  By clicking the Expand array list button, all the added array items are displayed.  Further on, the user can add a Organizational Unit for each Array item.  The following actions are available for each array item:
| |
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.  | |
Site ids | Allows the user with possibility to add one or multiple Site identification numbers, by clicking the Add item button.  By clicking the Expand array list button, all the added array items are displayed.  Further on, the user can add a Site for each Array item.  The following actions are available for each array item:
| |
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/.  | |
Tooltip date format | Allows the user to set the format of the date tooltip.  | |
X axis tooltip disabled | Allows the user to enable / disable the tooltip of the X axis.  | |
Y axis min width | Allows the user to set the minimum width of the Y axis.  | |
Y axis tooltip disabled | Allows the user to enable / disable the tooltip of the Y axis.  | |
Alarms | End offset | Allows the user to specify the end length offset measured in seconds, minutes, days, weeks, months or years.  |
End offset interval | Allows the user to set the end offset interval.  | |
Start offset | Allows the user to specify the start length offset measured in seconds, minutes, days, weeks, months or years.  | |
Start offset interval | Allows the user to set the start offset interval.  | |
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.  | |
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.  |
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.  |
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.  | |
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 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.  | |
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 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 weight |  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). | |
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.  |
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.  | |
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.  | |
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.  | |
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.  |
