X-Y Chart

1. Overview

The XY Chart component is a powerful data visualization tool designed for the Stream platform dashboard. It provides comprehensive charting capabilities with support for multiple chart types, real-time data updates, and advanced configuration options, specifically optimized for XY style data visualization.

This component is particularly effective for:

Correlation Studies: Showing how different parameters relate to each other
Multi-Dimensional Data: Visualizing complex data relationships
Comparative Analysis: Comparing multiple datasets with different scales
Process Monitoring: Real-time monitoring of process variables
Quality Control: Analyzing quality metrics and their relationships

Key Features

Multiple Chart Types: Line, Bar, and Area
Dual Y-Axis Support: Display data with different scales on separate axes
Semicolon-Separated Configuration: Simple string-based configuration for labels and tags
Real-Time Updates: Live data streaming from PLC/SCADA systems
Dynamic Select Integration: Runtime switching between data sources
Customizable Styling: Full control over colors, fonts, and appearance
Horizontal Chart Support: Option to display charts horizontally
Stacked Charts: Support for stacked bar and area charts

2. Configuration Steps

2.1 Panel Configuration

Panel Configuration Tab

Panel Configuration tab showing basic appearance and layout settings for the XY chart component.

The Panel tab controls the basic appearance and layout of the XY chart component.

Parameter	Description	Format/Options	Example
Title	Sets the display title for the XY chart panel	Text string with optional Dynamic Select placeholders	"Process Analysis - @{DS_LABEL}"
Title Color	Defines the color of the chart title text	Hex color code or CSS color name	#b6adad
Back Color	Sets the background color for the entire XY chart panel	Hex color code or CSS color name	#222222
Opacity	Controls the transparency level of the panel background	0.0 (transparent) to 1.0 (opaque)	1.0
Border Line	Defines the border style for the container. Supports both full border and side-specific border styling	CSS border syntax or side-specific syntax (semicolon-separated)	1px solid gray or left: 2px solid red; top: 1px solid blue
Border Radius	Sets the corner rounding for the panel	CSS border-radius value	0px
Show Header	Toggles the display of the panel header	Checked/Unchecked	Unchecked

Note: The @{DS} and @{DS_LABEL} placeholders in the Title field will be automatically replaced with the selected Dynamic Select value and label when Dynamic Select is configured and active.

2.2 Data Configuration

Data Configuration Tab

Data Configuration tab showing settings for X-axis labels and data configuration.

The Data tab controls the X-axis labels and data structure for the XY chart.

Parameter	Description	Format	Example
XAxisLabels	Defines the X-axis labels for the chart	Semicolon-separated string	"Type1;Type2;Type3;Type4"

X-Axis Labels Configuration

Configure the X-axis labels using semicolon-separated values:

Example: "Temperature;Pressure;Flow;pH;Conductivity"

Important: The number of X-axis labels should match the number of data points in each pen's TagName configuration for proper data alignment.

Each pen represents a separate data series in the XY chart. You can configure multiple pens to display different datasets.

Parameter	Description	Format/Options	Example
Label	Display name for the data series in the legend	Text string with optional Dynamic Select placeholders	"@{DS_LABEL} Measurements"
TagName	Data source tags for this pen (semicolon-separated)	Semicolon-separated tag names with Dynamic Select placeholders	"Tank.@{DS}_Level;Tank.@{DS}_Alarm;Tank.@{DS}_Status"
Color	Sets the color for this data series	Hex color code	#E5C454
Type	Chart type for this data series	line, bar, area	line
Y Axis	Which Y-axis to use for this data series	Y1, Y2	Y1
Fill	Whether to fill the area under the line (for line/area charts)	true/false	false
Opacity	Controls the transparency of the filled area	0.0 to 1.0	1.0

TagName Configuration

Configure data source tags using semicolon-separated values that correspond to X-axis labels:

Example: "Pump.type1_Value;Pump.type2_Value;Pump.type3_Value;Pump.type4_Value"

Data Alignment: The number of tags in TagName must match the number of X-axis labels for proper data alignment. Each tag corresponds to one X-axis position.

2.3 X-Axis Configuration

X-Axis Configuration Tab

X-Axis Configuration tab showing settings for horizontal axis grid lines and styling.

Controls the horizontal (X) axis appearance and behavior.

Parameter	Description	Default	Example
Show X Grid	Enables or disables vertical grid lines	true	true
X Grid Color	Sets the color of vertical grid lines	gray	#808080

2.4 Y-Axis Configuration

Y-Axis Configuration Tab

Y-Axis Configuration tab showing settings for left and right Y-axis configuration.

Controls the vertical (Y) axes appearance and behavior. Supports dual Y-axis configuration.

Parameter	Description	Default	Example
Show Y1 Grid	Enables or disables horizontal grid lines for left Y-axis	true	true
Y1 Grid Color	Sets the color of horizontal grid lines for left Y-axis	gray	#808080
Show Y2	Enables or disables the right Y-axis	false	true
Show Y2 Grid	Enables or disables horizontal grid lines for right Y-axis	false	true
Y2 Grid Color	Sets the color of horizontal grid lines for right Y-axis	gray	#808080

Dual Y-Axis Usage: Enable Y2 axis when you need to display datasets with different scales. For example, temperature (°C) on the left axis and pressure (bar) on the right axis.

2.5 Chart Settings

Chart Settings Tab

Chart Settings tab showing general behavior and appearance settings for the XY chart.

The Settings tab controls the general behavior and appearance of the XY chart.

Parameter	Description	Options	Default
Font Color	Sets the color for all text elements	Hex color code or CSS color name	#ffffff
Stacked Bar	Enables stacked bar chart mode	true/false	false
Bar Thickness	Sets the thickness of bars in bar charts	Numeric value (pixels)	25
Horizontal Chart	Displays the chart horizontally instead of vertically	true/false	false
Date Picker Show Selected Date	Shows selected date in date picker	true/false	false
Start At Zero	Determines whether the scale starts at zero	true/false	true

Horizontal Chart: When enabled, the chart orientation changes to horizontal, which can be useful for displaying data with long category names or when space is limited vertically.

2.7 Dynamic Select Configuration

Dynamic Select Configuration Tab

Dynamic Select Configuration tab showing settings for runtime data source switching.

The DS (Dynamic Select) tab enables runtime switching between different data sources.

Parameter	Description	Default	Example
Show DS Selector	Enables or disables the Dynamic Select dropdown	false	true
DS List	Array of available data sources for selection	Empty array	See example below

Dynamic Select Placeholders

@{DS}: Replaced with the selected DS value (e.g., "ph", "turbidity")
@{DS_LABEL}: Replaced with the selected DS display label (e.g., "pH", "Turbidity")

Dynamic Select Usage Example

XAxisLabels: "Level;Temperature;Pressure;Flow;Quality" TagName: "Tank.@{DS}_Level;Tank.@{DS}_Temp;Tank.@{DS}_Pressure;Tank.@{DS}_Flow;Tank.@{DS}_Quality" Label: "@{DS_LABEL} Measurements" Title: "@{DS_LABEL} Process Overview"

Dynamic Filtering: When a user selects "Tank 1" from the dropdown, all @{DS} placeholders are replaced with "tank1" and @{DS_LABEL} with "Tank 1", automatically updating all tag names, labels, and titles.

3. Troubleshooting

Common Issues and Solutions

Issue	Possible Causes	Solutions
Chart not displaying data	Incorrect tag names, data source not available, invalid data format	Verify tag names are correct and data sources are properly configured
Data misaligned with X-axis labels	Mismatch between XAxisLabels count and TagName count	Ensure number of tags in TagName matches number of X-axis labels
Dynamic Select not working	DS configuration not properly set up, invalid DSList entries	Ensure DS configuration is properly set up with valid DSList entries
Y-axis scale issues	Data range mismatch, axis configuration problems	Verify Y-axis settings and data ranges