WebGL not working

[tusharsadana]

even using the type:"scattergl", the plot remains slow, and there is no performance enhancements if it is working fine for you, a little implementation example and doc would be nice in the readme.

[andrefarzat]

Hello, @tusharsadana , would you create an example for us be able to reproduce this slowness ? Not only the type:"scattergl", but also de data and the layout objects 😺

[tusharsadana]

Hi, I am using it for plotting custom tdms file, it contained 8 traces with 60k points in each. I plotted with the pure js version using webgl, it works very smoothly but when I try to use this Angular version, it slows down like hell. I can give you snippets of code.

[tusharsadana]

DOM HTML

<plotly-plot
          [data]="Frequencygraph.data"
          [layout]="Frequencygraph.layout"
          class="center plot"
          *ngIf="!statusLoad && !statusNot">
</plotly-plot>

Typescript

this.Frequencygraph = {
          data: this.data.PSD,
          layout: {
            autoexpand: 'true',
            autosie: 'true',
            uirevision: "true",
            margin: {
              autoexpand: true,
              margin: 5
            },
            offset: 100,
            type: "scattergl",
            title: this.nameFinderMerge(),
            hovermode: "closest",
            xaxis: {
              linecolor: "black",
              linewidth: 2,
              mirror: true,
              title: "Time (s)",
              automargin: true
            },
            yaxis: {
              linecolor: "black",
              linewidth: 2,
              mirror: true,
              automargin: true,
              type: "log",
              exponentformat: "power",
              title: "PSD (" + this.unitY + "²/Hz)"
            }
          }
        };

Data

  for (var i = 0; i < this.receivedData.length; i++) {
          this.data.units.push({
            group: this.receivedData[i].group,
            unit: this.receivedData[i].unit
          });
          this.data.data.push({
            x: this.receivedData[i].time,
            y: this.receivedData[i].data,
            name: this.receivedData[i].name,
            hoverlabel: {
              namelength: 50
            },
            type: "scattergl",
            mode: "line"
          });
          this.data.PSD.push({
            x: this.receivedData[i].f,
            y: this.receivedData[i].PSD,
            name: this.receivedData[i].name,
            hoverlabel: {
              namelength: 50
            },
            type: "scattergl",
            mode: "line"
          });
        }

[andrefarzat]

this this.receivedData is the array within 60k objects in it ?

[tusharsadana]

yes, this contains that data.

[andrefarzat]

@tusharsadana it's been hard to replicate, but I could find that this many data is making the browser unresponsive sometimes. I believe we need to improve the change detection to avoid this dirty checking or something. Meanwhile, would it be possible for you to send us (via https://pastebin.com/ or another service) this data ? So, we could play with the real example

[tusharsadana]

You can find the data here, https://drive.google.com/file/d/1Z98LdYFYoiDT9p-xChg6pI2DQ2ojLC67/view?usp=sharing
Though I solved the issue for my project, https://medium.com/@tusharsadana/how-to-use-plotly-js-with-angular-8-2cbf74fd29ba if you are interested