# How can i add horizontal scrollbar to Chart?

**URL:** <https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982>\
**Category:** Dashboard\
**Created:** [4 March 2021 02:41 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982 "2021-03-04T02:41:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![PinPat](https://avatars.discourse-cdn.com/v4/letter/p/ad7895/32.png) [@PinPat](https://discourse.nodered.org/u/PinPat)\
**Post date:** [4 March 2021 02:41 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982/1 "2021-03-04T02:41:42Z")

</div>

I have a chart showing temperature sensor data vs time.  
I would like to add a horizontal scroll bar so that i can scroll previously plotted data.  
Tried my best bust can't find a right way to do it.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [4 March 2021 12:12 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982/2 "2021-03-04T12:12:23Z")

</div>

Hi mate,

I assume you mean slider, and not scrollbar?  
Then I can recommend you the slider node which is part of the "node-red-dashboard" plugin. Add it through "manage palette" if you don't have it already.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f34cfd5d698283879de8d12d0406df0073aa1637.png)

Though a bit primitive, but this is a line chart I'm displaying on my dashboard. The sliders allow me to zoom (or better: cut) only that part of the time series that I'm interested in:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/a/ea857ffd037fedb4b14e691562a467e7d8830207.png)

This is the flow which prepares a query to my mongo db and displays the result in a chart node:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/ac78b68afadf6f2488a4becb71cba9081ce62614.png)

The "Set factor left end" / "Set factor right end" simply set a flow context variable which I'm using in my query so that the slider effectively defines what part of the data series (here prices) is being queried. The code in those nodes is simply that:

```auto
flow.set("factor_right_end", msg.payload);
return msg;

```

and

```auto
flow.set("factor_left_end", msg.payload);
return msg;

```

Later on, I'm calling those flow variables via

```auto
var right_end = flow.get("factor_right_end");
var left_end = flow.get("factor_left_end");

```

and use it in my query (which is an extremely complex mongodb query, so sorry I can't show the full query here). But, what I can show you is how the minimum timestamp & maximum timestamp is calculated - based on those left\_end and right\_end values:

```auto
if (typeof right_end !== 'undefined' && right_end < 1) {
    ts_max = ts_max - (ts_max-ts_min) * (1.00 - right_end);
    //node.error("New ts_max = " + ts_max);
}

if (typeof left_end !== 'undefined' && left_end > 0) {
    ts_min = ts_min + (ts_max-ts_min) * left_end;
    //node.error("New ts_min = " + ts_max);
}

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b6ab793ac616e49d949a545d1771bd2543c2eef.png)

If you don't have timestamps in your data, you would have to develop an algorithm to manipulate / cut your data array to the begin and end point according to those values which are set by the slider (/sliders). Guess that's basic JavaScript fun stuff, and I'll leave that exercise to you 🙂

You an as well directly use the output of a slider node, and not store its value in a flow variable, but this is ofc up to you how to form your flow.

Let me know if this helps a bit and/or if you need further help.

Cheers,  
Marcel

---

<div class="post-metadata">

**Author:** ![PinPat](https://avatars.discourse-cdn.com/v4/letter/p/ad7895/32.png) [@PinPat](https://discourse.nodered.org/u/PinPat)\
**Post date:** [5 March 2021 08:49 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982/3 "2021-03-05T08:49:56Z")

</div>

> [@CreativeWarlock](#):
>
> ```auto
> var right_end = flow.get("factor_right_end");
> var left_end = flow.get("factor_left_end");
> 
> ```

Just wondering, where do you define these variable? Sorry if i am asking silly questions.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [6 March 2021 10:54 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982/4 "2021-03-06T10:54:59Z")

</div>

They are defined by the setter method: `flow.set("your_flow_variable")`

Please make yourself comfortable with this documentation: [Working with context : Node-RED](https://nodered.org/docs/user-guide/context) and especially [Writing Functions : Node-RED](https://nodered.org/docs/user-guide/writing-functions).

Cheers,  
Marcel

---

<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:** [5 April 2021 10:55 UTC](https://discourse.nodered.org/t/how-can-i-add-horizontal-scrollbar-to-chart/41982/5 "2021-04-05T10:55:29Z")

</div>

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