TimeSeries

TimeSeries tag can be used to label time series data.
Read more about Time Series Labeling on template page.

Note: Time axis should be sorted in your samples. Otherwise TimeSeries will be broken.
To use autogenerated indices as time axis you can just skip timeColumn param

Parameters

Param	Type	Description
name	string	name of the element
value	string	key used to lookup the data, it needs to reference either URLs for your time-series if valueType=url, otherwise expects JSON
[valueType]	enum	“url” or “json” If set to “url” then it loads value references inside value key, otherwise it expects JSON. Defaults to url
[timeColumn]	string	column name or index that provides temporal values, if your time-series data has no temporal column then its automatically generated
[timeFormat]	string	pattern used to parse values inside timeColumn, parsing provided by d3, and follows strftime implementation
[timeDisplayFormat]	string	format used to display temporal value, can be a number or a date, if a temporal column is a date then use strftime to format it, otherwise, if it’s a number then use d3 number formatting
[sep]	string	separator for you CSV file, default is comma “,”
[overviewChannels]	string	comma-separated list of channels names or indexes displayed in overview

Channel

Channel tag can be used to label time series data

Parameters

Param	Type	Default	Description
column	string		column name or index
[legend]	string		display name of the channel
[units]	string		display units name
[displayFormat]	string		format string for the values, uses d3-format: [,][.precision][f|%] , - group thousands with separator (from locale): , (12345.6 -> 12,345.6) ,.2f (12345.6 -> 12,345.60) .precision - precision for f|% type, significant digits for empty type: .3f (12.3456 -> 12.345, 1000 -> 1000.000) .3 (12.3456 -> 12.3, 1.2345 -> 1.23, 12345 -> 1.23e+4) f - treat as float, default precision is .6: f (12 -> 12.000000) .2f (12 -> 12.00) .0f (12.34 -> 12) % - treat as percents and format accordingly: %.0 (0.128 -> 13%) %.1 (1.2345 -> 123.4%)
[height]	number		height of the plot
[strokeColor]	string	"#f48a42"	plot stroke color, expects hex value
[strokeWidth]	number	1	plot stroke width

Example

csv loaded by url in value with 3 columns: time, sensor1, sensor2

<!-- key column `time` is a number actually -->
<View>
  <TimeSeries name="device" value="$timeseries" valueType="url" timeColumn="time">
     <Channel column="sensor1" />
     <Channel column="sensor2" />
  </TimeSeries>
</View>

Example

data stored directly in task’s field ts as json

<!-- timeseries key (`time`) is date in `timeFormat` formatted as full date on plot (by default) -->
<View>
  <TimeSeries name="device" value="$ts" timeColumn="time" timeFormat="%m/%d/%Y %H:%M:%S">
     <Channel column="sensor1" />
     <Channel column="sensor2" />
  </TimeSeries>
</View>