Chart

The Chart object serves as a graphical representation tool for visualizing data within the HSYCO software interface. It supports various chart types: bars, gauge, points, line, and spline.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

="mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

The default value is: x0y0.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

Flex Grow

Specifies if the objects should grow to fill the available space.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Objects expand to fill the available space.
false	Objects do not grow to fill the available space.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Objects shrink to fit the available space.
false	Objects do not shrink to fit the available space.

Width

Sets the object's width in pixels.

Minimum value is 1.

Height

Sets the object's height in pixels.

Minimum value is 1.

Chart

Type

Specifies the type of chart to be drawn.

The default value is: bars.

Attribute Values

Value	Description
bars	Default value. Draw bars.
gauge	Draw a gauge, for charts with a single value.
points	Draws points.
line	Draws a line connecting the values.
spline	Draws a spline connecting the values.

Orientation

Specifies the orientation of the chart.

The default value is: vertical.

Attribute Values

Value	Description
vertical	Default value. Default value. Draws a vertical chart.
horizontal	Draws an horizontal chart.

Bar Border

Specifies whether to draw bar/points borders.

The default value is: false.

Attribute Values

Value	Description
true	Draw border.
false	Default value. Don't draw border.

Axis

Origin

Sets the origin.

The default value is: 0.

Attribute Values

Value	Description
<number>	Origin.

Axis Labels

Specifies the labels on the x or y axis, as 'auto', 'none', or a custom list of values.

The default value is: auto.

Attribute Values

Value	Description
auto	Default value. Labels on the x axis (if vertical) or y axis (if horizontal) will go from 1 to the total number of values.
none	No label is shown on the x axis (if vertical) or y axis (if horizontal).
<comma-separated list>	List of custom labels on the x axis (if vertical) or y axis (if horizontal).

Axis Offset

Specifies the axis offset (y if vertical, x if horizontal) expressed as percentage or as the value series index. E.g. "50%" or "3".

The default value is: 0.

Attribute Values

Value	Description
<percentage>	Axis offset in percentage.
<index>	Value series index.

Draw Axis

Specifies whether the axes are visible or not.

The default value is: true.

Attribute Values

Value	Description
true	Default value. The axes are visible (also notches and labels).
false	The axes are not visible (also notches and labels).

Notches

Specifies the number of notches on the x-axis (for vertical charts) or on the y-axis (for horizontal charts).

The default value is: auto.

Attribute Values

Value	Description
<int>	Number of notches.

Offset[]

Specifies the percentage of value offset. Used to shift a specific set on the x axis if vertical, or on the y axis if horizontal. Used to show background sets. E.g. "offset[0]=-20; offset[1]=20".

Attribute Values

Value	Description
<int>	Percentage of value offset.

Thresholds

Specifies the list of values at which to display a line (threshold).

Attribute Values

Value	Description
<comma-separated list>	List of values at which to display a line.

Threshold Colors

Specifies a list of colors of threshold lines, one value each line.

Attribute Values

Value	Description
<comma-separated list>	List of CSS colors of threshold lines, one value each line.

Values

Value

Specifies the value to be drawn. Use with the "type" attribute set to "gauge".

Attribute Values

Value	Description
<number>	Value to be drawn.

Values

Specifies the values to be drawn, as a comma-separated list or arrays.

Attribute Values

Value	Description	Example
<comma-separated list of values>	Values to be drawn.	2,3,1.2,4
<comma-separated list of arrays>	Sets of values to be drawn.	[2,3,1.2,4],[4,1,0,0.2]

Value Label Type

Specifies the type of value label to be shown.

The default value is: inside.

Attribute Values

Value	Description
inside	Default value. Value labels are shown inside (if "type" is bars, points or gauge) or over (if "type" is line or spline).
outside	Value labels are shown above or below.
popup	Value labels are shown on mouseover, or on touch (if on a touch-enabled device).

Value Labels

Specifies the custom labels to be shown as value labels.

Attribute Values

Value	Description
comma-separated list	List of custom labels.

Value Label Color

Specifies the color of the value labels font.

Attribute Values

Value	Description
CSS color	Color of the value labels font.

Label Color

Specifies the color of the axis' and bars' labels.

Attribute Values

Value	Description
CSS color	Color of the axis' and bars' labels.

Value Range

Specifies the range of values displayed.

Attribute Values

Value	Description	Example
[min],[max]	Range of values displayed.	-2,10

Value Color

Specifies the color that applies to all values.

Attribute Values

Value	Description
CSS color	Color that applies to all values.

Value Colors

Specifies a list of colors, one for each data point in values.

Attribute Values

Value	Description
comma-separated list	List of CSS colors, one for each data point in values.

Style

Axis Color

Specifies the axis' color.

Attribute Values

Value	Description
<CSS color>	Axis' color.

Bg Color

Specifies the background color.

Attribute Values

Value	Description
<CSS color>	Background color.

Notch Color

Specifies the notch's color.

Attribute Values

Value	Description
<CSS color>	Color of the axis notches.

Point Size

Specifies the point's size, used for "points" chart type.

Attribute Values

Value	Description
<int>	Point size in pixels.

Spacing

Specifies the percentage of spacing between bars or points.

Attribute Values

Value	Description
0-100	Percentage of spacing between bars or points.

Stroke

Specifies the pixel size of the stroke that applies to line and spline chart's types.

Attribute Values

Value	Description
<int>	Pixel size of the stroke.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.