# NodeRed+Plotly Zoom Event

**URL:** <https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681>\
**Category:** General\
**Created:** [22 October 2020 15:15 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681 "2020-10-22T15:15:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)\
**Post date:** [22 October 2020 15:15 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/1 "2020-10-22T15:15:12Z")

</div>

Hello,

I'm using the plotly to show my trends, but i have a small problem with zoom event, i want to receive a msg in my node red with zoom data, im already receiving this information, but when i recevi the data my chart lose all the data and goes to blank mode.

Examples:

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

but if I don't use the way to send a message to the node just an alert, it works perfectly

 ![fefefefeTítulo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/1/c17042a67e360b48d55f9605075127615f1959aa.png)

my chart code

```auto
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<div id="myChart"></div>

<script>
var myChart = document.getElementById('myChart');

(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
    
    var data = msg.payload;
    
    var layout = {
// title: "Chart",
// titlefont: {
// size: 22,
// },
        autosize: true,
        width: 1500,
        height: 700,
        plot_bgcolor: '#ffffff',
        paper_bgcolor: '#ffffff',
        'xaxis': {
            title: 'date',
            rangeslider: {}
            },
        'yaxis': {
            //title: 'Average Temperature °C',
            mode: 'lines'
            }
        };

    Plotly.newPlot(myChart, data, layout, {displaylogo: false, scrollZoom: true})
    //Plotly.react(myChart, data).then(function(){Plotly.newPlot(myChart, data, layout, {displaylogo: false, scrollZoom: true}); });
    
    myChart.on('plotly_relayout',function(eventdata){  
        //scope.send({payload: ('ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +'x-axis end:' + eventdata['xaxis.range[1]'])});
        scope('ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +'x-axis end:' + eventdata['xaxis.range[1]']);
        //alert( 'ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +'x-axis end:' + eventdata['xaxis.range[1]'] );
    }); 
    }//close if
  });
})(scope);
</script>
</body>

```

I hope someone can help with this problem

thanks.

---

<div class="post-metadata">

**Author:** ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)\
**Post date:** [26 October 2020 12:55 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/2 "2020-10-26T12:55:39Z")

</div>

anyone can give me a little hand?

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [26 October 2020 15:56 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/3 "2020-10-26T15:56:36Z")

</div>

This is a very specific use case, but I can ask a few questions...

Is this plotly graph being created inside a `ui_template` node? If so, then whenever a new msg is sent to the node, it will run that script and create a new (and empty) plot (line #38 in your script above).

So it sounds like you want to just send it a "command" (i.e. zoom into this time range). Generally, with the regular ui dashboard charts, you will need to re-send all the data for that new "zoomed" graph. However I have not use the dashboard in a year, so that may not be the case anymore... sorry I cannot be more helpful.

---

<div class="post-metadata">

**Author:** ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)\
**Post date:** [26 October 2020 23:49 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/4 "2020-10-26T23:49:53Z")

</div>

hello thanks for your answer.

yes i'm using ui template

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

If i use this part of the code, "alert" everything work well i mean, i get the msg in the screen and i don't lost any data,chart still work well

```auto
myChart.on('plotly_relayout',function(eventdata){  
        alert( 'ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +'x-axis end:' + eventdata['xaxis.range[1]'] );
    }); 

```

But when i use the "scope" i lose all the data.

one more time thanks for the help

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [27 October 2020 11:50 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/5 "2020-10-27T11:50:36Z")

</div>

Ah, I think I see the problem -- when you use the `msg.send(...)` it returns a `msg` object that can flow to the next node connected to the output of `ui_template` node. But it looks like your `ui_template` node has the option 'Add output messages to stored state' selected -- which means that the graph data points are replaced by the data from your returned msg, which would cause the data in your chart to 'disappear'.

Try unchecking that box, and see if that fixes it.

---

<div class="post-metadata">

**Author:** ![Cristiano](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@Cristiano](https://discourse.nodered.org/u/Cristiano)\
**Post date:** [28 October 2020 21:53 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/6 "2020-10-28T21:53:33Z")

</div>

Thanks for your answer.

I unchecked all option's and i use another function of plotly "react" instead of "newPlot", and seems working well.

```auto
Plotly.react(myChart, data, layout, {displaylogo: false, scrollZoom: true});

```

In plotly exist 4 function very similar([https://plotly.com/javascript/plotlyjs-function-reference/](https://plotly.com/javascript/plotlyjs-function-reference/))  
Plotly.react  
Plotly.plot  
Plotly.newPlot  
Plotly.restyle

I thought I was using it the right way. but after all no.

Thanks for the help 🙂

---

<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:** [11 November 2020 21:53 UTC](https://discourse.nodered.org/t/nodered-plotly-zoom-event/34681/7 "2020-11-11T21:53:33Z")

</div>

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