TimeSeries

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

Note: The time axis in your data must be sorted, otherwise the TimeSeries tag does not work. To use autogenerated indices as time axes, don’t use the timeColumn parameter.

Use with the following data types: time series.

Parameters

Param	Type	Default	Description
name	string		Name of the element
value	string		Key used to look up the data, either URLs for your time-series if valueType=url, otherwise expects JSON
[valueType]	url | json	url	Format of time series data provided. If set to “url” then Label Studio loads value references inside value key, otherwise it expects JSON.
[sync]	string		Object name to sync with.
[cursorColor]	string		Color of the playback cursors used in sync (hex or any SVG-compatible color string)
[timeColumn]	string		Column name or index that provides temporal values. If your time series data has no temporal column then one is automatically generated.
[timeFormat]	string		Pattern used to parse values inside timeColumn, parsing is 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, use strftime to format it. If it’s a number, use d3 number formatting.
[durationDisplayFormat]	string		Format used to display temporal duration value for brush range. If the temporal column is a date, use strftime to format it. If it’s a number, use d3 number formatting.
[sep]	string	","	Separator for your CSV file.
[overviewChannels]	string		Comma-separated list of channel names or indexes displayed in overview.
[overviewWidth]	string	"25%"	Default width of overview window in percents
[fixedScale]	boolean	false	Whether to scale y-axis to the maximum to fit all the values. If false, current view scales to fit only the 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	200	height of the plot
[strokeColor]	string	"#f48a42"	plot stroke color, expects hex value
[strokeWidth]	number	1	plot stroke width
[markerColor]	string	"#f48a42"	plot stroke color, expects hex value
[markerSize]	number	0	plot stroke width
[markerSymbol]	number	circle	plot stroke width
[timeRange]	string		data range of x-axis / time axis
[dataRange]	string		data range of y-axis / data axis
[showAxis]	string		show or bide both axis
[fixedScale]	boolean		if false current view scales to fit only displayed values; if given overwrites TimeSeries’ fixedScale

Example

Labeling configuration for time series data stored in a CSV loaded from a URL containing 3 columns: time, sensor1, and sensor2. The time column stores time as a number.

<View>
  <TimeSeries name="device" value="$timeseries" valueType="url" timeColumn="time">
     <Channel column="sensor1" />
     <Channel column="sensor2" />
  </TimeSeries>
  <TimeSeriesLabels name="label" toName="device">
    <Label value="Run" background="#5b5"/>
    <Label value="Walk" background="#55f"/>
  </TimeSeriesLabels>
</View>

Example

Labeling configuration for time series data stored in the task field ts in Label Studio JSON format. The time field is stored as a date in the timeformat field and formatted as a full date on the 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>

MultiChannel

The MultiChannel tag is used to group multiple channels together in a time series visualization. Use this tag within a TimeSeries tag to organize and display multiple data channels in a single view.

Parameters

Param	Type	Default	Description
[height]	number	200	height of the plot
[showAxis]	boolean	true	whether to show both axes
[showYAxis]	boolean	true	whether to show the y-axis
[fixedScale]	boolean		whether to use a fixed scale for all channels. If not set, inherits from parent TimeSeries tag

Example

Labeling configuration for time series data with multiple channels grouped together:

<View>
  <TimeSeries name="ts" value="$timeseries" 
        valuetype="url"
              timeColumn="time"
              timeFormat="%Y-%m-%d %H:%M:%S.%f"
              >
    
  <MultiChannel>
      <Channel column="velocity" />
      <Channel column="acceleration" />
    </MultiChannel>

  </TimeSeries>

  <TimeSeriesLabels name="label" toName="ts">
    <Label value="Run" background="red"/>
    <Label value="Walk" background="green"/>
  </TimeSeriesLabels>
</View>

<!-- {
  "timeseries": "https://app.heartex.ai/samples/time-series.csv?time=time&values=velocity%2Cacceleration&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f&type=csv"
} -->