This application example demonstrates how to use custom widgets within the apps Performance Insight and Energy Manager for flexible visualization of any plant data.
Besides the standart widget portfolio within Performance Insight and Energy Manager, users are able to create customized widgets tailored to specific needs. These widgets are based on the Apache ECharts library, which is a free and open-source JavaScript library for data visualizations. Several defined ECharts options enable dynamic and interactive data representation.
The ECharts library covers several widget types:
Bar, Line, Pie, Scatter, Radar, Tree, Boxplot, Heatmap, Map, Graph, Sankey, Gauge and many more...
| > Click on graphic to download JavaScript code | |
|---|---|
 'Beijing AQI' (ECharts) to visualize limit deviations in production |
 'Radial Polar Bar' (ECharts) to visualize distribution of production times |
 Energy signature to visualize consumptions against a trendline |
 KPI calculation to represent values as individual as possible |
 Month/Year comparison to visualize consumptions proportionally |
 Comparison over time to track current consumptions against the average |
 Reason tree to visualize distribution of error codes |
 'Rainfall vs Evaporation' (ECharts) to show basic statistics at a glance |
 Explore more examples in the ECharts library |
This repository describes how to create a custom widget within Performance Insight. It gives an overview about the configuration possibilities and provides some widget examples.
- Access to an Industrial Edge Management System (IEM)
- Onboarded Industial Edge Device (IED) on IEM
- IED connected to PLC
- TIA Portal project loaded on PLC
- HTML5-capable Internet browser (e.g. Google Chrome)
- Industrial Edge Management (IEM) V1.14.9
- Industrial Edge Device V3.0.0
- Management applications:
- Databus Configurator V3.2.0
- Common Connector Configurator V2.0.0
- Device applications:
- Databus V3.1.0
- OPC UA Connector V2.4.0
- Common Configurator V2.2.0
- IIH Essentials V2.2.0
- Performance Insight V1.22.0
- TIA Portal V19
This application example is based on the tank application TIA Portal project.
You can find detailled information about the following steps in the Configuration documentation:
You can use the custom widgets as any other widgets within Performance Insight and Energy Manager.
Via the dashboard date picker you can define the time range for incoming data to e.g. analyze system behaviour backwards.
You can also open the Details view of the widget or export the data as .csv file.
Simply import this dashboard into Performance Insight or Energy Manager to try it out.
You can find further documentation and help in the following links:
- Industrial Edge Hub
- Industrial Edge Forum
- Industrial Edge Documentation
- Industrial Edge landing page
- Industrial Edge GitHub page
Please check our contribution guideline.
This documentation describes how you can download and set up a test environment which consists of or contains third-party software. Please read the following disclaimer carefully.
Please read the Legal information.