--- tags: - UI Page widgets alias: user-guide-uipage-widgets-edc-chart-widget widgetname: EDC description: "This documentation describes an EDC widget that visualizes data collection instances in a UIPage, offering customizable graphs and tabular data" --- # EDC ![edc_icon][edc_icon] ## Overview The EDC widget places a graph representation of all Data Collection Instances for a given set of Parameters, gathered for a specific context, in a UIPage. These representations can then be enhanced by displaying the actual collected parameter values or particular aggregated values for the Data Collection Instances. ![edc_widget_view_graph][edc_widget_view_graph] The user can choose to see the graphic visualization of the data or a table with the data itself: ![edc_widget_view_data][edc_widget_view_data] While in the graph visualization mode, hovering over the data points displays extra information on them: ![edc_widget_hover_graph][edc_widget_hover_graph] ## General Steps {% include-markdown 'includes/pages/ui_widgets_general_steps_with_behavior.md' %} ![edc_widget_general][edc_widget_general] ## Widget Customization 1. Optionally, in the **Style** tab, you can define a Border Width and Color. ![Screenshot showing a customization options panel for an EDC widget with a border width and color setting.](images/edc_widget_style.png) 2. In the **Setup** tab, the widget can be configured through the following fields: * **Appearance** * Title - The EDC chart title. If set, it will be displayed at the top. * Show Date/Time labels - Toggle to show or hide the date and time labels for the data points. * **Axis** * Primary Y-Axis: * Automatic - Automatically adjusts the Y-Axis scale. * Manual - Keeps the Y-Axis fixed when viewed. If selected, you must define the primary minimum and maximum values for the Y-Axis. * **Display** * Filter Mode: * Last Number of Points - Displays the specified number of recent data points. * Date interval - Displays data within a specified date range. If selected, you must define: * From date - The start date of the filter. Accepts tokens such as @Today and Now(). * To date - The end date of the filter. Accepts tokens such as @Today and Now(). * Plot Mode: * Scatter - Displays individual data points on the graph. * Group - Groups data by time unit and aggregate function (e.g., Average/Minute for the specified date interval). If selected, you must define the Group Units (Days, Hours, Minutes, None, Seconds, or Weeks) and the Group Function (Average, Maximum, Minimum, None, Range, Rule, Standard Deviation, or Sum). * **Filters** - You can define the context that should be used as a filter for the data to be displayed. The available filters are: * **Facility** * **Area** * **Step** * **Resource** * **Product** * **Flow** ![edc_widget_setup][edc_widget_setup] 3. In the **Series** tab, add one or more series of data (Charts) as desired. For that, press :material-plus: in the top right of the grid to add, :material-trash-can: to remove, :material-arrow-up: and :material-arrow-down: to specify the order in which they should be displayed. For each series, specify: * **Series Details** * Name - The name of the series. * Color - The color for the data points * Transparency - The transparency level, between 0-100%. * Chart Type - Choose between Points, Line, or Area. * **Parameter** - Choose a Parameter already configured in your MES system to be displayed in the EDC chart. * **Aggregation** * Level - Choose between None, Parameter, or Sample. * Function - Select the aggregation function (Average, Maximum, Minimum, None, Range, Rule, Standard Deviation, or Sum). * **Filters** - you can define the context that should be used as a filter for the data to be displayed for the current series. The available filters are: * **Facility** * **Area** * **Step** * **Resource** * **Product** * **Flow** ![edc_widget_series][edc_widget_series] 4. Optionally, define the **Links** between this widget and other elements of the UI Page in the Links tab. ![Screenshot showing the Links tab for customizing widget connections in the UI page.](images/edc_widget_links.png) 5. By saving and closing the settings, the widget will be changed accordingly. [edc_icon]: images/edc_icon.png [edc_widget_view_graph]: images/edc_widget_view_graph.png [edc_widget_view_data]: images/edc_widget_view_data.png [edc_widget_hover_graph]: images/edc_widget_hover_graph.png [edc_widget_general]: images/edc_widget_general.png [edc_widget_setup]: images/edc_widget_setup.png [edc_widget_series]: images/edc_widget_series.png ## Using the Fill Settings Feature {% include-markdown 'includes/pages/fill_settings_ui_pages_widgets.md' %} ![Screenshot showing EDC fill settings.](images/edc_fill_settings.png)