NodeRed+Plotly Zoom Event

General
1

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
ewfwefwef2356Ă—1080 84.8 KB

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

fefefefeTĂ­tulo
fefefefeTĂ­tulo1892Ă—1080 117 KB

my chart code

<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.

2

anyone can give me a little hand?

3

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.

4

hello thanks for your answer.

yes i'm using ui template

image
image1022Ă—903 47.9 KB

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

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

5

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.

6

Thanks for your answer.

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

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

In plotly exist 4 function very similar(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 :slight_smile:

1 Like
7

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