Perspective time series chart "window" marker type?

Ignition
1

I have a perspective time-series chart which I’m using as a trend, and it automatically retrieves low and high warning thresholds and puts them on the chart as a marker.

What I’d also like to do is to retrieve my set point and set point tolerance, and show the tolerance window on the chart as a semi-transparent band.

I can add another marker, and dynamically modify the width, but the problem is, the width is in pixels, not scaled to the Y axis. If I could determine the height of the Y axis I could probably calculate it in pixels and make it work, but as far as I know there’s no way to do this.

There’s a dropdown selector for the marker type, but the only available selection is “Line”. Are there any other options available here, like “window”? Or is there another way I could approach this?

See below for what I want to achieve. Here you can see my set point is 25%, and you can see the tolerance band around it. My setpoint tolerance is +/- 5% so the band should extend between 20% and 30%, but instead it extend +/- 5 pixels from the set point.
Screen Shot 2022-05-14 at 10.08.29 am

1 Like
2

Just bumping this to see if anyone has a creative way of achieving this - if not I might log a feature request

3

Time series deviation band

TimeSeriesChart JSON 
[
  {
    "type": "ia.chart.timeseries",
    "version": 0,
    "props": {
      "series": [
        {
          "name": "series_0",
          "data": [
            {
              "time": 1560469431423,
              "Temperature": 52,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469432423,
              "Temperature": 18,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469433423,
              "Temperature": 26,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469434423,
              "Temperature": 63,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469435423,
              "Temperature": 65,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469436423,
              "Temperature": 12,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469437423,
              "Temperature": 61,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469438423,
              "Temperature": 60,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469439423,
              "Temperature": 58,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            },
            {
              "time": 1560469440423,
              "Temperature": 1,
              "DevHigh": 60,
              "SetPoint": 45,
              "DevLow": 30
            }
          ]
        }
      ],
      "plots": [
        {
          "trends": [
            {
              "visible": true,
              "type": "area",
              "series": "series_0",
              "interpolation": "curveLinear",
              "breakLine": true,
              "stack": true,
              "radius": 2,
              "axis": "",
              "columns": [
                {
                  "key": "DevHigh",
                  "color": "#09899C",
                  "styles": {
                    "normal": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "highlighted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "selected": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "muted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    }
                  }
                }
              ],
              "baselines": []
            },
            {
              "visible": true,
              "type": "area",
              "series": "series_0",
              "interpolation": "curveLinear",
              "breakLine": true,
              "stack": true,
              "radius": 2,
              "axis": "",
              "columns": [
                {
                  "key": "DevLow",
                  "color": "#111111",
                  "styles": {
                    "normal": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "highlighted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "selected": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "muted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    }
                  }
                }
              ],
              "baselines": []
            },
            {
              "visible": true,
              "type": "line",
              "series": "series_0",
              "interpolation": "curveCatmullRom",
              "breakLine": true,
              "stack": true,
              "radius": 2,
              "axis": "",
              "columns": [
                {
                  "key": "Temperature",
                  "color": "#FAE924",
                  "styles": {
                    "normal": {
                      "stroke": {
                        "color": "",
                        "width": 2,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "highlighted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "selected": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    },
                    "muted": {
                      "stroke": {
                        "color": "",
                        "width": null,
                        "dashArray": null,
                        "opacity": null
                      },
                      "fill": {
                        "color": "",
                        "opacity": null
                      }
                    }
                  }
                }
              ],
              "baselines": []
            }
          ],
          "axes": [],
          "markers": []
        }
      ],
      "timeAxis": {
        "visible": false,
        "grid": {
          "visible": true
        }
      }
    },
    "meta": {
      "name": "TimeSeriesChart"
    },
    "position": {
      "x": 34,
      "y": 22,
      "height": 413,
      "width": 608
    },
    "custom": {}
  }
]

Here I’ve got three trends: DevHigh, DevLow and Temperature. The DevHigh and DevLow are set to Area and DevLow’s colour needs to match your theme or the chart’s background color. Order of the trends is important.

  • The opaque area plots will obscure the grid if used.
4

Neat! I think I’ll still raise a feature request because it would be handy to have a more built-in feature that doesn’t obscure grid lines or rely on careful colour selection, but that’s a great workaround for the time being.

Thanks!