Use line graph cards to plot time series data on a graph.
The structure of the line graph card schema is as follows:
For the dashboard schema, see the Dashboard JSON reference topic.
For more information about how to use a line graph card, see the Line graph card topic.
A line graph card is defined in a cards array.
Example:
{
"cards": [{
"id": "air_flow_mean",
"size": "LARGE",
"title": "Air flow mean vs max",
"type": "TIMESERIES",
"content": {
"series": [{
"dataSourceId": "airflow_mean",
"label": "Airflow Mean"
},
{
"dataSourceId": "airflow_max",
"label": "Airflow Max",
"color": "#1192e8"
}
],
"xLabel": "X axis",
"yLabel": "Y axis",
"showLegend": false,
"decimalPrecision": "2",
"unit": "PSI",
"timeDataSourceId": "timestamp"
},
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "air_flow_rate",
"id": "airflow_mean"
},
{
"aggregator": "max",
"attribute": "air_flow_rate",
"id": "airflow_max"
}
],
"range": {
"type": "periodToDate",
"count": -7,
"interval": "day"
},
"additionalData": {
"type": "alert",
"dataFilter": {
"name": "alert_air_flow_rate_greater_than_1"
}
},
"timeGrain": "day"
}
}],
"title": "Example"
}
Table 1. Cards
Parameter | Description | Type | Required |
---|---|---|---|
id |
The id identifies the card in the JSON file. The ID must be unique per dashboard. |
string | yes |
size |
The size of the card. Valid values are are MEDIUM , MEDIUMTHIN ,MEDIUMWIDE , LARGE , LARGETHIN and LARGEWIDE . Migrate your card size accordingly. |
string | yes |
title |
The title to display on the card. | string | yes |
type |
The type of card. Use TIMESERIES for a line graph card. |
string | yes |
content |
A definition of the content to display on the card. | object | yes |
dataSource |
Information about the source of each data item that is displayed on the card or that is used in thresholding. | object | yes |
timeRange |
The relative time range to select by default for the card. Valid values are last24Hours , last7Days , lastMonth , lastQuarter , lastYear , thisWeek , thisMonth ,
thisQuater and thisYear . |
string | no |
In cards.content
, specify the information to display in the series and the unit of the data items.
Example:
{
"content": {
"series": [{
"dataSourceId": "airflow_mean",
"label": "Airflow Mean"
},
{
"dataSourceId": "airflow_max",
"label": "Airflow Max",
"color": "#1192e8"
}
],
"xLabel": "X axis",
"yLabel": "Y axis",
"showLegend": false,
"decimalPrecision": "2",
"unit": "PSI",
"timeDataSourceId": "timestamp"
}
}
Table 2. Content
Parameter | Description | Type | Required |
---|---|---|---|
series |
Defines each line on the graph. | array | yes |
unit |
Specify the unit that the data items are measured in, for example, for example: PSI . |
string | no |
xLabel |
A label for the X axis. | string | no |
includeZeroOnXaxis |
Include zero on the X axis. | boolean | no |
includeZeroOnYaxis |
Include zero on the Y axis. | boolean | no |
showLegend |
Show or hide the legend on the graph. | boolean | no |
decimalPrecision |
Number of decimal places. | string | no |
timeDataSourceId |
The timestamp data item to use for the line graph. An advanced configuration parameter that you can use to set the value to timestamp if your timestamp is not accurately reflected on your line graph. |
string | no |
In cards.content.series
, specify the information to display in the series on the graph.
Example:
{
"series": [{
"dataSourceId": "airflow_mean",
"label": "Airflow Mean"
},
{
"dataSourceId": "airflow_max",
"label": "Airflow Max",
"color": "#1192e8"
}
]
}
Table 3. Series
Parameter | Description | Type | Required |
---|---|---|---|
dataSourceId |
A unique ID for the data item whose value is displayed. The data item must also be defined in the dataSource object. |
string | yes |
dataFilter |
A definition of a filter to apply to the series. For example, you might filter the maximum air flow to plot the maximum timeseries for a specific device, a specific plant, or model. The filter can be a dimension value or a device ID. If you specify
a data filter, you must include the filter in the groupBy field in the dataSource c configuration. |
object | |
label |
The label to display for the metric. | string | yes |
color |
Color of the line. Specify the color using its hex code or its name. The hex code must start with # and be 7 characters long. If you specify the name of the color, the name must be in lower case, for example, purple. | string | no |
In cards.content.attributes.dataFilter
, you can specify a filter to apply to the attribute or value.
Example: - filter by deviceID
{
"dataFilter": {
"deviceid": "73000"
}
}
Example: - filter by dimension
{
"dataFilter": {
"manufacturer: "Rentech"
}
}
Example: - filter by alert field value
{
"dataFilter": {
"severity: "Critical"
}
}
Specify a deviceid, a dimension name and value, or an alarm field value. You can only specify one filter for each series. If you specify a data filter, you must include the filter in the groupBy
field in the dataSource
configuration
In cards.dataSource
, connect the information that is displayed in the series or that is used in alerts to data items in the data lake. You can apply a range and a time grain to the series.
Example:
{
"dataSource": {
"attributes": [{
"aggregator": "mean",
"attribute": "air_flow_rate",
"id": "airflow_mean"
},
{
"aggregator": "max",
"attribute": "air_flow_rate",
"id": "airflow_max"
}
],
"range": {
"type": "periodToDate",
"count": -7,
"interval": "day"
},
"additionalData": {
"type": "alert",
"dataFilter": {
"name": "alert_air_flow_rate_greater_than_1"
}
},
"timeGrain": "day"
}
}
Table 4. Series
Parameter | Description | Type | Required |
---|---|---|---|
attributes |
A definition of the source of the data that is used in series and that is used in alerts | array | yes |
range |
Specifies a time range for the data items. | object | no |
additionalData |
Mark up the line graph with additional information such alert thresholds being exceeded. | object | no |
type |
Set "type": "alert" to show alert information in the series of the line graph. |
string | no |
groupBy |
If you define a dataFilter for any of the series, group the results by group the dimensions,the device IDs, or alarm field that you specify. For example, "groupBy": ["deviceid", "manufacturer"] or "groupBy": ["severity"] |
array | no |
timeGrain |
The time granularity that is applied to the graph. Valid values are hour , day , month , or year . On device dashboards, if no timeGrain is specified, the value day is used.
On summary dashboards, if no timeGrain is specified, the timeGrain value defaults to the timeGrain of the summary dashboard. |
string | no |
In cards.dataSource.attributes
, specify the aggregation method to apply to each attribute or data item.
Example:
{
"attributes": [{
"aggregator": "mean",
"attribute": "air_flow_rate",
"id": "airflow_mean"
},
{
"aggregator": "max",
"attribute": "air_flow_rate",
"id": "airflow_max"
}
]
}
Table 5. attributes
Parameter | Description | Type | Required |
---|---|---|---|
aggregator |
An aggregation method to apply to the data item at the dashboard level. Valid values are min , max , mean , first , count , std , sum , last. If you do not specify an aggregator, the line on the graph shows input data. The input data typically represents a raw score such as temperature. However, if the data item that you reference was calculated as part of the function pipeline, the input metric might represent an aggregated metric, such as the daily mean temperature. |
string | no |
attribute |
The data item name. Corresponds to a name in the data lake. | string | yes |
id |
An ID for the data item. The ID corresponds to the dataSourceId . |
string | yes |
In cards.dataSource.range
, specify a time range to apply to the whole time series.
Example:
{
"range": {
"type": "periodToDate",
"count": -7,
"interval": "day"
}
}
Table 6. range
Parameter | Description | Type | Required |
---|---|---|---|
type |
Valid values are rolling or periodToDate . Rolling period rolls to the current date whereas periodToDate ends on the first day of each calendar month. If you select periodToDate , and you set to the range to
the last 2 months, on Dec 2, the date range is up until the 1st of December (the first day of the current calendar month). |
string | yes |
count |
A negative number representing the number of interval units to subtract from the dashboard end date. For example, if the dashboard end date is today and the time interval is day , enter -1 to display the last 24 hours
of data in the card. |
string | yes |
interval |
Time interval. Valid values are hour , day , week , month , quarter , year . |
string | yes |
In cards.dataSource.additionalData
, enhance the data that is displayed on the graph with additional information. Currently, you can enhance the data on the graph by displaying alert information for one or more lines in the series.
Example:
{
"additionalData": {
"type": "alert",
"dataFilter": {
"name": "alert_air_flow_rate_greater_than_1"
}
}
}
Table 6. additonalData
Parameter | Description | Type | Required |
---|---|---|---|
type |
Currently, you can enhance the line graph with alert information. Set type to alert. |
string | yes |
dataFilter |
Specify the alert data items to use to mark up the line graph. Use an alert data item that is tagged as alert(calculated) . For example, the output of the alert built-in function is tagged with alert(calculated) . |
object | yes |
Table 7. name
Parameter | Description | Type | Required |
---|---|---|---|
name |
The name of the alert data item. The input attribute to the alert must be either represented as a line on the graph or be used in the calculation of one of the lines on the graph. | string | yes |