# Perspective time series chart "window" marker type?

**URL:** <https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 14, 2022, 12:14am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566 "2022-05-14T00:14:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 14, 2022, 12:14am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566/1 "2022-05-14T00:14:41Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/4/04aa9b5aafe35f6c4a5cad264a44e5dc853c9ece.png)

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 22, 2022, 5:17am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566/2 "2022-05-22T05:17:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 22, 2022, 8:13am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566/3 "2022-05-22T08:13:10Z")

</div>

![Time series deviation band](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c488f73b79f56ebf31bc6730328b34ec247e30fd.png)

> **TimeSeriesChart JSON**
>
> ```auto
> [
> {
> "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.

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 25, 2022, 8:04am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-window-marker-type/59566/4 "2022-05-25T08:04:42Z")

</div>

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!