javascript - How to get a shifting Plotly plot with JavaScript?

问题描述

I am trying to create a flowing Plotly plot. However, I am not sure which Plotly parameters to use in order to achieve the result in the example image at the very bottom.

My Plotly is here: RandomSignalFlow

The HTML:

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
</body>

The JS:

function rand() { 
  return Math.random();
}

Plotly.plot('graph', [{
  y: [1,2,3].map(rand),
  mode: 'lines',
  line: {color: '#80CAF6'}
}]);

var cnt = 0;

var interval = setInterval(function() {

  Plotly.extendTraces('graph', {
    y: [[rand()]]
  }, [0])

  if(cnt === 100) clearInterval(interval);
}, 300);

So this would create the data flow, but the plot will be constantly compressing horizontally as the data flows in. I am after a tracking behaviour (as in the image bellow).

I tried using .shift() to crop the data's X and Y components but that did not work for some reason.

The project associated with the image is here.

标签： javascriptplotly

javascript - How to get a shifting Plotly plot with JavaScript?

问题描述

解决方案

推荐阅读