logo
logoslack Join Community
logofirst
logofirst
label studio logo

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 Default 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
[fixedScale] boolean false always scale y-axis to the maximum to fit all the values; if false current view scales to fit only displayed values

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
[fixedScale] boolean if false current view scales to fit only displayed values; if given overwrites TimeSeries’ fixedScale

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>
Couldn't find what you were looking for? Please let us know on Slack 
If you found an error, you can file an issue on GitHub!