Plotly GL Context Issue

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>
<h3>Using plotly-latest (v1.37.1). With multiple scattergl plots, running into GL context limit.</h3>
<h5>Most browsers have a 16 context limit per process, so I would think a single page should support up to 16 plots. Prior to 1.37.1, we could usually show 8-9 plots at once. With 1.37.1, anything over 6 seems to hit the context limit. It looks like Plotly is using multiple contexts for each plot?</h5>

<div class="flex-container wrap">
  <div id="testChart1" style="width:500px; height:400px;"></div>
  <div id="testChart2" style="width:500px; height:400px;"></div>
  <div id="testChart3" style="width:500px; height:400px;"></div>
  <div id="testChart4" style="width:500px; height:400px;"></div>
  <div id="testChart5" style="width:500px; height:400px;"></div>
  <div id="testChart6" style="width:500px; height:400px;"></div>
  <div id="testChart7" style="width:500px; height:400px;"></div>
  <div id="testChart8" style="width:500px; height:400px;"></div>
  <div id="testChart9" style="width:500px; height:400px;"></div>
  <div id="testChart10" style="width:500px; height:400px;"></div>
</div>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

JavaScript

// Sets the number of plots to create (up to 10)
var plotCount = 7;

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 data = {
	x: [],
  y: [],
  color: [],
  symbol: [],
  size: [],
  customData: []
};

var npoints = 1000;
for (var i = 0, l = npoints; i < l; i++) {
    data.y.push(Math.random() * 5000)
    data.x.push(i);
    data.color.push(colorList[Math.floor(Math.random() * 20)]);
    data.size.push(6);
    data.symbol.push('x');
    data.customData.push({id:i});
};


var t0 = performance.now();
var createPlot = function( divId, data ) {
	var plotElement = document.getElementById(divId);
  
	Plotly.plot( 
    plotElement, 
    [{
      type: 'scattergl',
      mode: 'markers',
      marker: { 
        symbol: data.symbol,
        size: data.size,
        color: data.color
      },
      x: data.x,
      y: data.y,
      customdata: data.customData,
    }], 
    { 
      margin: { t: 40, b:50, l:75, r:30 } 
    } 
  );
  
  plotElement.on(
      "plotly_selected",
      function ( eventData ) {
      	let pointArray = eventData.points.map( function(point) { return point.customdata; } );
				console.log( "Plotly points selected:", pointArray );
      } );
  
}

for (var j = 1, c = plotCount; j <= c; j++) {
    createPlot( "testChart" + j, data );
};