-
Guide
Tags
API
What's new
tags
- Introduction
Objects
- Audio
- AudioPlus
- HyperText
- Image
- Paragraphs
- Text
- TimeSeries
Controls
- BrushLabels
- Choice
- Choices
- Ellipse
- EllipseLabels
- HyperTextLabels
- KeyPoint
- KeyPointLabels
- Label
- Labels
- List
- Pairwise
- ParagraphLabels
- Polygon
- PolygonLabels
- Ranker
- Rating
- Rectangle
- RectangleLabels
- Relation
- Relations
- Shortcut
- TextArea
- Taxonomy
- TimeSeriesLabels
- Filter
Visual
- Header
- Style
- Table
- View
TimeSeries
TimeSeries tag can be used to label time series data.
Read more about Time Series Labeling on template page.
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>