Chart

From HSYCO
Jump to navigation Jump to search
Note  For a description and a complete list of UI Objects, see UI Objects.

Draws a chart. Its appearance and data are set with UI Attributes. More than one set of values can be specified.

Parameters

  • id: the object's ID, used by UISets. Required
  • position: the object's position. Use the pixels or rows and columns coordinates format
  • size: the chart's area's width and height
  • attributes: list of UI attribute ids and values defining the chart's aspect and data. Setting this parameter is the same as setting each UI attribute with a UISet

Syntax

(chart!<id> <address>; <position>; <width>; <height>; <attributes>)

E.g.

(chart!chart1 x3y187; 312; 180; (type=line; values=0,10,24,12,7,35,42,1,23,4))

UI Attributes

UI Object Attributes (Common)

Chart attributes

Name Value Description
type bars Draw bars
gauge Draw a gauge, for charts with a single value. Use with the "value" attribute
points Draws points
line Draws a line connecting the values
spline Draws a spline connecting the values
orientation vertical Default value. Draws a vertical chart
horizontal Draws an horizontal chart
value single value Value to be drawn. To be used when "type" is gauge
value[n] Same as "value", but refers to a specific set of values
values comma-separated list of values Values to be drawn. E.g. 2,3,1.2,4
comma-separated list of arrays Sets of values to be drawn. E.g. [2,3,1.2,4],[4,1,0,0.2]
values[n] Same as "values", but refers to a specific set of values
valuerange [min],[max] Range of values displayed. E.g. -2,10
axislabels auto Default. 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 of values Custom labels on the x axis (if vertical) or y axis (if horizontal)
valuelabeltype inside 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)
valuelabels comma-separated list of values Custom values to show in value labels
valuelabels[n] Same as "valuelabels", but refers to a specific set of values
spacing 0-100 Percentage of spacing between bars or points
spacing[n] Same as "spacing", but refers to a specific set of values
offset[n] percentage 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"
drawaxis true Default. The axes are visible (also notches and labels)
false The axes are not visible (also notches and labels)
axisoffset percentage The axis offset (y if vertical, x if horizontal) expressed as percentage or as the value series index. E.g. "50%" or "3"
origin value moves the origin to a value different from 0 ( e.g. origin=3.2 )
notches value number of notches on the x-axis (for vertical charts) or on the y-axis (for horizontal charts)
pointsize number of pixels points size (use for the points chart type)
bgcolor CSS color background color; use standard CSS color codes
valuecolor CSS color an CSS color that applies to all values
valuecolor[n] CSS color an CSS color that applies to all values in the specified set
valuecolors comma-separated list of CSS colors series of HTML colors, one for each data point in values; use standard HTML color codes
valuecolors[n] comma-separated list of CSS colors series of HTML colors, one for each data point in values; use standard HTML color codes
barshadow
barborder
axiscolor
notchcolor
labelcolor
valuelabelcolor
thresholds
thresholds[n]
thresholdcolor
thresholdcolors
stroke
stroke[n]
A CSS color can be specified as
  • hex value: #<rr><gg><bb> E.g. #FF1010
  • color name: red, blue, white...
  • as rgb: rgb(<r>,<g>,<b>) E.g. rgb(255,30,30)
  • as rgba: rgba(<r>,<g>,<b>,<alpha>) E.g. rgba(255,30,30,0.5)