Auto Adjust Bar Chart | Custom Web Control | WinCC Unified & V8

Custom Web Control

About Auto Adjust Bar Chart

The Auto Adjust Bar Chart is a high-performance Custom Web Control designed for industrial SCADA and HMI applications. It provides a dynamic visualization for comparing process values, featuring an intelligent layout engine that automatically switches orientation based on the container dimensions. This ensures optimal readability whether deployed on wide-screen control room monitors or narrow mobile operator panels within WinCC Unified and WinCC V8 environments.

Key Features

• Adaptive Orientation: The chart automatically detects its aspect ratio to toggle between vertical and horizontal bar layouts for maximum space efficiency.
• Interactive Tooltips: Features a click-to-view tooltip system that allows operators to inspect precise process values on demand.
• Event-Driven Integration: Includes a BarClicked event that triggers HMI actions or scripts when an operator selects a specific data point.
• Programmatic Control: The clearSelection method allows engineers to reset the UI state and close active tooltips via external logic.

Customization

This control offers deep visual integration through six primary properties. Engineers can define the backgroundColor to match corporate themes and apply sophisticated barColorStart and barColorEnd gradients for professional aesthetic depth. The unit property ensures all engineering values are correctly labeled, while the showGrid toggle allows for a cleaner or more precise data background. All data is driven by the data array property, which is fully bindable to PLC tags.

Use Cases

• Production Comparisons: Comparing output across multiple lines or shifts in a single view.
• Energy Management: Visualizing power consumption across different plant sectors.
• Inventory Levels: Monitoring tank levels or silo capacities with clear engineering units.

Compatibility

Fully compatible with WinCC Unified (TIA Portal) and WinCC V8. The package includes all necessary manifest files for seamless integration into the TIA Portal library.

💡 TIA Portal Reminder: Remember to uncheck the "Read only" option in TIA Portal when linking a tag to a property that needs to be written from the Custom Web Control. If you do not, the CWC will only be able to read the HMI tags and not write to them.

⚠️ AI-Generated: This custom web control was automatically generated using AI. Please test and validate its performance and security before deploying in production environments.

⚠️ AI-Generated: This custom web control was automatically generated using AI technology. It may contain errors or unexpected behavior. Users are responsible for testing and validating before using in production environments.