# Better way to draw trend across multiple vertical slider

**URL:** <https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 18, 2023, 1:23pm UTC](https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075 "2023-08-18T13:23:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [August 18, 2023, 1:23pm UTC](https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075/1 "2023-08-18T13:23:20Z")

</div>

I am trying to work out a way to visualize a look up table.

like the screenshot below, I have a couple of sliders, but I want to link the dots as a chart.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f3a69401e53ffe840f71b29c8ff31bcf1181d7c.png)

Currently I can achieve it by having a XY chart at the back of the sliders, so when the slides are changing, I am updating the XY chart to suit.

But is there any better way that I can just draw the chart dynamically on the view? like using CSS? I am still quick new to CSS.

---

<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:** [August 18, 2023, 3:09pm UTC](https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075/2 "2023-08-18T15:09:50Z")

</div>

How about this?

![coordSliderView](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6e2822c36a58f75609bdd5488f8a89fca8c5f3f.gif)

The green line is generated using a label with a border width of 1 and height of 2. The main CSS trick is the `transform : skewY()`.

```auto
{
  "borderStyle": "solid",
  "borderWidth": 1
  "borderColor": "#00aa00",
  "transform": "skewY(0.0deg)" <-- See the binding.
}

```

- I'm using a coordinate view just to make the (x, y) coordinates easy to work with.
- I have custom properties on each slider keeping track of the slider knob x and y positions.
- The skew is calculated using `atan(dy/dx) * 180 / 3.1416` to return degrees.
- My animation was recorded on my development machine so it should be best case regarding lagginess of the line component. It may look atrociously bad with a slow connection.

Try pasting the view into Project Browser | Perspective | Views.

> **coordSliderView**
>
> ```auto
> {
> "custom": {},
> "params": {},
> "props": {
> "defaultSize": {
> "height": 328,
> "width": 412
> }
> },
> "root": {
> "children": [
> {
> "meta": {
> "name": "lblLine01"
> },
> "position": {
> "height": 2
> },
> "propConfig": {
> "custom.skew": {
> "binding": {
> "config": {
> "expression": "atan(\r\n ({../Slider1.custom.knobY} - {../Slider0.custom.knobY})\r\n / ({../Slider1.custom.knobX} - {../Slider0.custom.knobX})\r\n)"
> },
> "type": "expr"
> }
> },
> "position.width": {
> "binding": {
> "config": {
> "expression": "{../Slider1.custom.knobX} - {../Slider0.custom.knobX}"
> },
> "type": "expr"
> }
> },
> "position.x": {
> "binding": {
> "config": {
> "path": "../Slider0.custom.knobX"
> },
> "type": "property"
> }
> },
> "position.y": {
> "binding": {
> "config": {
> "expression": "({../Slider0.custom.knobY} + {../Slider1.custom.knobY}) / 2\r\n"
> },
> "type": "expr"
> }
> },
> "props.style.transform": {
> "binding": {
> "config": {
> "expression": "\"skewY(\" + {this.custom.skew} * 180 / 3.1416 + \"deg)\""
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "style": {
> "borderColor": "#00aa00",
> "borderStyle": "solid",
> "borderWidth": 1
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Slider0"
> },
> "position": {
> "height": 200,
> "width": 20,
> "x": 80,
> "y": 40
> },
> "propConfig": {
> "custom.knobX": {
> "binding": {
> "config": {
> "expression": "{this.position.x} + {this.position.width} / 2"
> },
> "type": "expr"
> }
> },
> "custom.knobY": {
> "binding": {
> "config": {
> "expression": "{this.position.y} + {this.position.height} \r\n- ({this.props.value} - {this.props.min})\r\n/ ({this.props.max} - {this.props.min})\r\n* {this.position.height}"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "orientation": "vertical",
> "value": 54
> },
> "type": "ia.input.slider"
> },
> {
> "meta": {
> "name": "Slider1"
> },
> "position": {
> "height": 200,
> "width": 20,
> "x": 280,
> "y": 40
> },
> "propConfig": {
> "custom.knobX": {
> "binding": {
> "config": {
> "expression": "{this.position.x} + {this.position.width} / 2"
> },
> "type": "expr"
> }
> },
> "custom.knobY": {
> "binding": {
> "config": {
> "expression": "{this.position.y} + {this.position.height} \r\n- ({this.props.value} - {this.props.min})\r\n/ ({this.props.max} - {this.props.min})\r\n* {this.position.height}"
> },
> "type": "expr"
> }
> }
> },
> "props": {
> "orientation": "vertical",
> "value": 79
> },
> "type": "ia.input.slider"
> },
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "height": 32,
> "rotate": {
> "anchor": "38% 50%"
> },
> "width": 50,
> "x": 65,
> "y": 249
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "../Slider0.props.value"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "textStyle": {
> "textAlign": "center"
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_0"
> },
> "position": {
> "height": 32,
> "rotate": {
> "anchor": "38% 50%"
> },
> "width": 50,
> "x": 265,
> "y": 249
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "path": "../Slider1.props.value"
> },
> "type": "property"
> }
> }
> },
> "props": {
> "textStyle": {
> "textAlign": "center"
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "root"
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 18, 2023, 11:33pm UTC](https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075/3 "2023-08-18T23:33:38Z")

</div>

![java_KySnpUPWVe](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc3394b0135cc88c1e6b3f3236e43bb17b95438e.gif)

[linearInterpolation.zip](https://forum.inductiveautomation.com/uploads/short-url/gvaX4BXcVWQDVecqeEvHkMq8fm6.zip) (9.3 KB)

Another way to skin this cat; programmatically build an SVG behind the sliders. By using a flex repeater to display the sliders, you can force everything to stay lined up.

The screen capture was recorded over a VPN with a ~30Mbps 200ms ping connection, but your mileage may vary.

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [August 19, 2023, 11:01am UTC](https://forum.inductiveautomation.com/t/better-way-to-draw-trend-across-multiple-vertical-slider/78075/4 "2023-08-19T11:01:59Z")

</div>

Thank you both.

Excellent solutions.