Plotly Chart update options

by brian428

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div>
<span><button id="doUpdate1" type="button">Do Update (fewer)</button></span>
<span><button id="doUpdate2" type="button">Do Update (more)</button></span>
<span><button id="doRestyle1" type="button">Do Restyle (fewer)</button></span>
<span><button id="doRestyle2" type="button">Do Restyle (more)</button></span>
</div>

<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
<div id="testChart" style="width:100vw; height:calc(100vh - 100px);"></div>
-->
<div id="testChart" style="width:100%; height:100%;"></div>
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>

JavaScript

// Some docs examples: https://plot.ly/javascript/line-and-scatter/
// More complex example: https://plot.ly/~chris/17389.embed

/* Speed results: (point count: first render, redraw, redraw 2):
500 points: 350ms, 38ms, 22ms
5000 points: 330ms, 66ms, 20ms
50000 points: 570ms, 75ms, 60ms
500000 points: 900ms, 400ms, 325ms
*/
var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var testChart = document.getElementById('testChart');

var initData = function() {
  var data1 = { x: [], y: [], color: colorList[0], symbol: "x", size: 2 };
	var data2 = { x: [], y: [], color: colorList[1], symbol: "cross", size: 4 };
	var data3 = { x: [], y: [], color: colorList[2], symbol: "diamond", size: 4 };
  return { data1: data1, data2: data2, data3: data3 };
}

var createData = function( dataObj, npoints, yMax ) {
	for (var i = 0, l = npoints; i < l; i++) {
      dataObj.y.push(Math.random() * yMax)
      dataObj.x.push(i);
  };
};

var series = [];
var createPlot = function( divId, dataObjArray ) {

	for (var i = 0; i < dataObjArray.length; i++) {
  	var dataObj = dataObjArray[i];
    series.push(
      {
        type: 'scattergl',
        mode: 'markers',
        marker: { 
          symbol: dataObj.symbol,
          size: dataObj.size,
          color: dataObj.color
        },
        x: dataObj.x,
        y: dataObj.y 
      }
    );
  };
  
	Plotly.plot( 
    document.getElementById(divId), 
    series, 
    { 
      margin: { t: 40, b:50, l:75, r:30 }
    } 
  );
};

var values = initData();
createData( values.data1, 300, 5000 );
createData( values.data2, 300, 5000 );
createData( values.data3, 300, 5000 );
createPlot( "testChart", [values.data1, values.data2, values.data3] );


var updatePlot = function( divId, dataObjArray ) {

	for (var i = 0; i < dataObjArray.length; i++) {
  	var...