# Ui Builder - eCharts get zoom position

**URL:** <https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486>\
**Category:** General\
**Created:** [16 July 2021 09:15 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486 "2021-07-16T09:15:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yzerman](https://avatars.discourse-cdn.com/v4/letter/y/ce7236/32.png) [@yzerman](https://discourse.nodered.org/u/yzerman)\
**Post date:** [16 July 2021 09:15 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/1 "2021-07-16T09:15:15Z")

</div>

Hi, can anyone help me how could I take the current position of the slider zoom in eCharts and send it via uibuilder.send(). I think it needed to add custom js function that will wait for slider movement etc..

Thank you in advance

Georgi

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 July 2021 09:26 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/2 "2021-07-16T09:26:04Z")

</div>

I don;t use eCharts so can't give you specifics. However, I assume that it has some kind of change notification event? If so, all you need to do is have a method (function) attached to that event that does a `uibuilder.send`.

---

<div class="post-metadata">

**Author:** ![yzerman](https://avatars.discourse-cdn.com/v4/letter/y/ce7236/32.png) [@yzerman](https://discourse.nodered.org/u/yzerman)\
**Post date:** [16 July 2021 09:33 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/3 "2021-07-16T09:33:12Z")

</div>

Thank you. My problem is that I am not sure how to build this method in Vue.

---

<div class="post-metadata">

**Author:** ![yzerman](https://avatars.discourse-cdn.com/v4/letter/y/ce7236/32.png) [@yzerman](https://discourse.nodered.org/u/yzerman)\
**Post date:** [16 July 2021 12:16 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/4 "2021-07-16T12:16:15Z")

</div>

I found a solution - add this in the template

> @dataZoom="updateZoom"

and this in index.js in methods:

```auto
updateZoom(e) {
       console.log(e); 
}

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 July 2021 22:08 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/5 "2021-07-16T22:08:26Z")

</div>

> [@yzerman](#):
>
> and this in index.js in methods:

Have you tried replacing that js code with:

```js
updateZoom(e) {
       console.log(e);
       uibuilder.send( {topic:'ooh/I/came/from/the/browser', payload: e} );
}

```

attach a debug node to the top output of your uibuilder node and see what is output to the debug panel.

---

<div class="post-metadata">

**Author:** ![yzerman](https://avatars.discourse-cdn.com/v4/letter/y/ce7236/32.png) [@yzerman](https://discourse.nodered.org/u/yzerman)\
**Post date:** [17 July 2021 10:18 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/6 "2021-07-17T10:18:34Z")

</div>

Yes. It works perfectly. Thank you!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 July 2021 10:19 UTC](https://discourse.nodered.org/t/ui-builder-echarts-get-zoom-position/48486/7 "2021-07-31T10:19:16Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.