@sixclear/xy-chart
XY Chart v1.1.0
Overview
The XY Chart plugin displays data in time-series chart. A plot legend at the top provides the ability to show/hide plots and change colors if desired, however those parameters and many other display are all available in configuration. All plots are normalized into the range [0, 1] for display on this single chart based on the plot’s min and max settings (the plot’s min value will display as 0 and the plot’s max value will display as 1). The min and max values are shown next to the plot’s current value in the plot legend so this context is always visible.
This plugin subscribes to any number of other publishing plugins, and can peform computations against that data before plotting to charts (see configuration for subscribesTo). As with many plugins, this plugin supports the JADE Expression Language in many places, such as allowing computations using subscription data when defining plot data. See the configuration documentation below and/or the example editor for further details.
One detail which must be tuned is setting each individual plot’s historyLength (in samples) to correspond to the incoming data rate for that plot and the chart’s x-axis duration setting. For example, suppose we set the x-axis duration setting to 30 seconds. Further suppose we have a plot which subscribes to data published at 2 samples/sec. If we would like to show data for this plot spanning the full 30 second window displayed in the chart, we would need # samples = 2 samples/sec * 30 seconds = 60 samples. In general, the sampling rate (in samples per second) multiplied by the x-axis duration (in seconds) will yield the number of samples we should specify as the plot’s historyLength to span the full chart width.
User Interface
The XY Chart interface is also highly configurable in terms of the number of plots, how plots are displayed, and how much data each plot maintains. See the notes above regarding historyLength for further details here. The updatePeriod option determines how frequently data is updated in the interface and is separate from the incoming subscription data handling. For example, several data points may arrive for each plot before we choose to update the plot data. This decoupling allows us to handle incoming subscription data at different rates for each plot, while controlling how frequently we actually “paint” updates to the user interface.
Configuration Example
Configuration Details
ROOT object
This top level object holds all configuration information for this plugin.
Required: true
Default: (not specified; see any element defaults within)
subscribesTo array
An array of plugin instance names corresponding to plugin instances which will be subscribed to by this plugin instance.
Required: true
Default:
[]
subscribesTo[n] string
A plugin instance name (corresponding to a plugin you wish to subscribe to) or a topic published by the worker (ex. __PLUGIN_INFO__).
Required: false
Default: ""
options object
Configuration options specific to this plugin. Note that variables and expressions are generally allowed in this section.
Required: true
Default: (not specified; see any element defaults within)
options.updatePeriod integer
The period in milliseconds at which we compute and update plot data.
Required: true
Default: 1000
options.properties object
An object definiting the chart properties.
Required: true
Default: (not specified; see any element defaults within)
options.properties.label string
The label to display on the chart.
Required: true
Default: "My Plot Name"
options.properties.xAxis object
The x-axis properties. There are two valid combinations for additional elements: 1. label, format, duration, and numTicks, and 2. label, format, flipped, min, max, increment, and autoscale. #1 will display the most recent 'duration' number of seconds on the x-axis, while #2 will display the x-axis according to the min, max, increment, etc. When defaults are generated and shown (for example in an editor for this plugin), they generate with configuration #2.
Required: true
Default:
{
"label": "x-axis",
"format": "%d",
"flipped": false,
"min": 0,
"max": 10,
"increment": 1,
"autoscale": "on"
} options.properties.xAxis::{Specify Min/Max/Autoscale} object
This configuration for the x-axis requires configuring label, format, flipped, min, max, increment, and autoscale.
Required: false
Default: (not specified; see any element defaults within)
options.properties.xAxis::{Specify Min/Max/Autoscale}.label string
The x-axis label to display.
Required: true
Default: "x-axis"
options.properties.xAxis::{Specify Min/Max/Autoscale}.format string
A string defining the x-axis format.
Required: true
Default: "%d"
options.properties.xAxis::{Specify Min/Max/Autoscale}.flipped boolean
Whether to flip the x-axis (ex. if true, instead of rendering 0 on the left and 10 on the right of the x-axis, it would render 0 on the right and 10 on the left.
Required: true
Default: false
options.properties.xAxis::{Specify Min/Max/Autoscale}.min number
The x-axis min value.
Required: true
Default: 0
options.properties.xAxis::{Specify Min/Max/Autoscale}.max number
The x-axis max value.
Required: true
Default: 10
options.properties.xAxis::{Specify Min/Max/Autoscale}.increment number
The x-axis increment used to display x-axis tick marks.
Required: true
Default: 1
options.properties.xAxis::{Specify Min/Max/Autoscale}.autoscale enum (string)
Whether to autoscale the x-axis. The value "on" autoscales on every update, "off" never autoscales, and "once" autoscales just once when data is first rendered.
Required: true
Default: "on"
Enum Items: "on" | "off" | "once"
options.properties.xAxis::{Specify Duration} object
This configuration for the x-axis required configuring label, format, duration, and numTicks.
Required: false
Default: (not specified; see any element defaults within)
options.properties.xAxis::{Specify Duration}.label string
The x-axis label to display.
Required: true
Default: "x-axis"
options.properties.xAxis::{Specify Duration}.format string
A string defining the x-axis format.
Required: true
Default: "%d"
options.properties.xAxis::{Specify Duration}.duration number
The time duration in seconds to display on the x-axis.
Required: true
Default: 0
options.properties.xAxis::{Specify Duration}.numTicks number
The number of ticks to show on the x-axis.
Required: true
Default: 0
options.properties.plotArea object
The plot area properties.
Required: true
Default: (not specified; see any element defaults within)
options.properties.plotArea.fgColor object
The plot area foreground color specified as an RGB value.
Required: true
Default: (not specified; see any element defaults within)
options.properties.plotArea.fgColor.r integer
The red component of the RGB color definition.
Required: true
Default: 255
options.properties.plotArea.fgColor.g integer
The green component of the RGB color definition.
Required: true
Default: 255
options.properties.plotArea.fgColor.b integer
The blue component of the RGB color definition.
Required: true
Default: 255
options.properties.plotArea.bgColor object
The plot area background color specified as an RGB value.
Required: true
Default: (not specified; see any element defaults within)
options.properties.plotArea.bgColor.r integer
The red component of the RGB color definition.
Required: true
Default: 250
options.properties.plotArea.bgColor.g integer
The green component of the RGB color definition.
Required: true
Default: 250
options.properties.plotArea.bgColor.b integer
The blue component of the RGB color definition.
Required: true
Default: 250
options.plots array
An array of plots to dislay in the chart. Note that axis format strings can use Format String Syntax.
Required: true
Default:
[
{
"name": "My Plot",
"subscription": "SOME_SUBSCRIBER_PLUGIN_INSTANCE_NAME",
"min": 0,
"max": 10,
"historyLength": 100,
"data": {
"timestamp": "Float:GetDateTime(\"SecondsSinceEpoch\", 6)",
"value": "Float:Rand(0,7)",
"unit": "Volts"
},
"properties": {
"visible": true,
"antiAlias": false,
"pointStyle": "circleFull",
"lineStyle": "solid",
"lineWidth": "1",
"fillTo": "none",
"interpolation": "linear"
}
}
] options.plots[n] object
An object defining a plot.
Required: false
Default: (not specified; see any element defaults within)
options.plots[n].name string
The name of the plot.
Required: true
Default: "My Plot"
options.plots[n].subscription string
The name of the plugin instance which sources this data.
Required: true
Default: ""
options.plots[n].min number
The minimum value which determines the bottom of the scale on the graph for this plot (all plots are normalized into the range [0,1] to display on one scale).
Required: true
Default: 0
options.plots[n].max number
The maximum value which determines the bottom of the scale on the graph for this plot (all plots are normalized into the range [0,1] to display on one scale).
Required: true
Default: 10
options.plots[n].historyLength integer
The number of data points to store and render for this plot.
Required: true
Default: 100
options.plots[n].data object
An object defining timestamp (x-coordinate) and value (y-coordinate) which make up a point in this plot on the chart. VAR namespace variables are available when defining these points and have direct access to the published data in the plot's subscription. New values are generated the updatePeriod for all plots.
Required: true
Default: (not specified; see any element defaults within)
options.plots[n].data.timestamp stringnumber
The timestamp used to plot this point (the x-coordinate of the point). VAR namespace variables are available here.
Required: true
Default: 0
options.plots[n].data.value stringnumber
The value used to plot this point (the y-coordinate of the point). VAR namespace variables are available here.
Required: true
Default: 0
options.plots[n].data.unit string
The physical unit associated with the plot.
Required: true
Default: "V"
options.plots[n].properties object
An object defining the plot properties.
Required: true
Default: (not specified; see any element defaults within)
options.plots[n].properties.visible boolean
Whether the plot is visible in the chart.
Required: true
Default: true
options.plots[n].properties.antiAlias boolean
Whether the apply antiAliasing when rendering the plot.
Required: true
Default: true
options.plots[n].properties.pointStyle enum (string)
The point style to use for the plot.
Required: true
Default: "circleFull"
Enum Items: "none" | "circleEmpty" | "circleFull" | "circleFullDot" | "circleEmptyDot" | "squareEmpty" | "squareFull" | "squareFullDot" | "squareEmptyDot" | "squareFullSmall" | "dot" | "cross" | "crossSmall" | "X" | "x" | "diamondFullDot" | "squareEmptySmall"
options.plots[n].properties.lineStyle enum (string)
The line style to use for the plot.
Required: true
Default: "solid"
Enum Items: "solid" | "dash" | "dot" | "dashdot" | "dashdotdot"
options.plots[n].properties.lineWidth enum (string)
The line width to use for the plot.
Required: true
Default: "1"
Enum Items: "0" | "1" | "2" | "3" | "4" | "5"
options.plots[n].properties.fillTo enum (string)
The color fill approach to use for the plot. For example, "below" would apply the line color to the area below the plot in the chart.
Required: true
Default: "none"
Enum Items: "none" | "zero" | "below" | "above"
options.plots[n].properties.interpolation enum (string)
The interpolation strategy to apply between points.
Required: true
Default: "none"
Enum Items: "none" | "stepwiseVertical" | "linear" | "stepwiseHorizontal" | "stepwiseHorizontalCentered" | "stepwiseVerticalCentered"
options.plots[n].properties.lineColor objectstring
The color to use for plot points specified as an RGB value. If lineColor is not provided, a color will be automatically selected.
Required: false
Default:
{} options.plots[n].properties.pointColor objectstring
The color to use for plot points specified as an RGB value. If pointColor is not provided, a color will be automatically selected.
Required: false
Default: "auto"
options.logger object
Defines the logging (data and errors) for this plugin. Note that a LOG variable space is provided here, as well as the VAR variable space. Available variables are: @LOG{LOGGERNAME}, @LOG{TIMESTAMP}, @LOG{LOGMESSAGE}, @LOG{ERRORMESSAGE}, and @VAR{instanceName} are available variables. note: @LOG{LOGGERNAME} is equal to the @VAR{instanceName} here.
Required: true
Default: (not specified; see any element defaults within)
options.logger.Enable boolean
Whether to enable the logger.
Required: true
Default: true
options.logger.LogFolder string
The folder in which to write log files.
Required: true
Default: "\\JADE_LOGS\\@VAR{instanceName}"
options.logger.FileNameFormat string
The filename to use when creating log files. Note: if the filesize limit is reached new files will be created with enumerated suffixes such as: MyLogFile-1.txt, MyLogFile-2.txt, etc.
Required: true
Default: "@VAR{instanceName}-@LOG{TIMESTAMP}.log"
options.logger.ErrorsOnly boolean
Whether to log only errors.
Required: true
Default: true
options.logger.DiskThrashPeriod integer
The period in milliseconds with which to flush the file buffer to ensure it's committed to the hard drive. Note: This is a performance consideration to prevent writing to disk too frequently.
Required: true
Default: 1000
options.logger.FileSizeLimit integer
The file size at which to create new files.
Required: true
Default: 1000000
options.logger.StartLogFormat string
The initial string to put into the log file when opened for the first time.
Required: true
Default: "**** START LOGGER - @LOG{LOGGERNAME} (@LOG{TIMESTAMP}) ****"
options.logger.EndLogFormat string
The final string to put in the log file when closed.
Required: true
Default: "\n\n**** END LOGGER - @LOG{LOGGERNAME} (@LOG{TIMESTAMP}) ****"
options.logger.LogEntryFormat string
The format to use when writing log entries when errors are not present.
Required: true
Default: "\n\n@LOG{LOGMESSAGE}"
options.logger.ErrorLogEntryFormat string
The message format used to construct error log entries.
Required: true
Default: "\n\n@LOG{ERRORMESSAGE}"
options.logger.TimestampFormat string
The format used by the @LOG{TIMESTAMP} variable.
Required: true
Default: "%Y-%m-%d %H-%M-%S%3u"
panel object
Required: true
Default: (not specified; see any element defaults within)
panel.open boolean
Whether to open the front panel immediately when run.
Required: true
Default: true
panel.state enum (string)
The state in which the window will open.
Required: true
Default: "Standard"
Enum Items: "Standard" | "Hidden" | "Closed" | "Minimized" | "Maximized"
panel.transparency integer
The transparency of the window. 0 = opaque, 100 = invisible.
Required: true
Default: 0
panel.title string
The title of the plugin window when it runs. Note that the variable 'instanceName' is provided here in a VAR variable container.
Required: true
Default: "@VAR{instanceName}"
panel.titleBarVisible boolean
Whether the window title bar is visible.
Required: true
Default: true
panel.showMenuBar boolean
Whether the menu bar is visible.
Required: true
Default: false
panel.showToolBar boolean
Whether the toolbar is visible.
Required: true
Default: false
panel.makeActive boolean
Whether the window becomes active when opened.
Required: true
Default: false
panel.bringToFront boolean
Whether the window is brought to the front / top of other windows when opened.
Required: true
Default: false
panel.minimizable boolean
Whether the window is minimizable.
Required: true
Default: true
panel.resizable boolean
Whether the window is resizable.
Required: true
Default: true
panel.closeable boolean
Whether the window is closeable.
Required: true
Default: true
panel.closeWhenDone boolean
Whether to close the window when complete.
Required: true
Default: true
panel.center boolean
Whether to center the window when opened. Note: this property overrides the 'position' property.
Required: true
Default: false
panel.position object
The position of the window when opened the first time.
Required: true
Default: (not specified; see any element defaults within)
panel.position.top integer
The vertical position of the window in pixels from the top edge of the viewport. Note: this property is overriden by the 'center' property.
Required: true
Default: 100
panel.position.left integer
The horizontal position of the window in pixels from the left edge of the viewport. Note: this property is overriden by the 'center' property.
Required: true
Default: 100
panel.size object
The size of the window when opened the first time.
Required: false
Default: (not specified; see any element defaults within)
panel.size.width integer
The width of the window in pixels. -1 means use the default width for the panel. Note that depending on panel features exposed, there may be a limit to how small a panel can become.
Required: true
Default: -1
panel.size.height integer
The height of the window in pixels. -1 means use the default height for the panel. Note that depending on panel features exposed, there may be a limit to how small a panel can become.
Required: true
Default: -1
channel object
The communication channel definition used by this plugin. Note: this section rarely needs modifications. In many cases, the underlying plugin implementation depends on at least some of these settings having the values below. Consult with a JADE expert before making changes to this section if you are unfamiliar with the implications of changes to this section.
Required: true
Default: (not specified; see any element defaults within)
channel.SendBreakTimeout integer
The timeout duration in milliseconds to wait for sending messages.
Required: true
Default: 1000
channel.WaitOnBreakTimeout integer
The timeout duration in milliseconds to wait for receiving messages. Note: -1 means wait indefinitely or until shutdown is signalled.
Required: true
Default: -1
channel.WaitOnShutdownTimeout integer
The timeout duration in milliseconds to wait for shutdown acknowledgment.
Required: true
Default: 2000
channel.ThrowTimeoutErrors boolean
Whether to throw timeout errors vs simply returning a boolean indicating whether a timeout occurred.
Required: true
Default: false
channel.ThrowShutdownUnacknowledgedErrors boolean
Whether to throw 'shutdown unacknowledged' errors.
Required: true
Default: true
channel.QueueSize integer
The size of the underlying communication queue in bytes. Note: -1 means unbounded (i.e. grow as needed with available memory).
Required: true
Default: 100
channel.SendBreakEnqueueType enum (string)
The enqueue strategy employed on the underlying queue for standard messages.
Required: true
Default: "LossyEnqueue"
Enum Items: "Enqueue" | "EnqueueAtFront" | "LossyEnqueue" | "LossyEnqueueAtFront"
channel.SendErrorEnqueueType enum (string)
The enqueue strategy employed on the underlying queue for error messages.
Required: true
Default: "LossyEnqueue"
Enum Items: "Enqueue" | "EnqueueAtFront" | "LossyEnqueue" | "LossyEnqueueAtFront"
channel.SendShutdownEnqueueType enum (string)
The enqueue strategy employed on the underlying queue for the shutdown message.
Required: true
Default: "LossyEnqueueAtFront"
Enum Items: "Enqueue" | "EnqueueAtFront" | "LossyEnqueue" | "LossyEnqueueAtFront"
channel.FlushQueueBeforeWaitingOnBreak boolean
Whether to flush the queue upon waiting for new messages (i.e. whether to clear the queue and wait for the next 'new' message; this has the effect of removing old messages and waiting for the next message.
Required: true
Default: false
channel.FlushQueueAfterBreaking boolean
Whether to flush the queue after receiving a new message (i.e. whether to handle the next message coming in the queue and then flush; this has the effect of handling the oldest message (if it exsits) or the next message before flushing the queue.
Required: true
Default: false