Description

ssalveMobiltex

opened on Jun 21, 2023

Issue body actions

Hi all, I am facing web gl not supported issue on Production build for plotly
Angular Plotly version - "angular-plotly.js": "^5.1.0",
"plotly.js-dist": "^2.24.2",
"plotly.js-dist-min": "^2.24.2",

I am using the latest Chrome version with hardware acceleration on.

Activity

1. andrefarzat commented on Jun 22, 2023

   

   andrefarzat

   on Jun 22, 2023

   Collaborator

   More actions

   Hello @ssalveMobiltex . Quite weird this. Does this happen with another browser ? (e.g.: Firefox, edge or safari ?)
2. andrefarzat

   added

   waiting answer

   on Jun 22, 2023
3. ssalveMobiltex commented on Jun 22, 2023

   

   ssalveMobiltex

   on Jun 22, 2023

   Author

   More actions

   Yes @andrefarzat I do get it on different browsers as well
4. andrefarzat commented on Jun 23, 2023

   

   andrefarzat

   on Jun 23, 2023

   Collaborator

   More actions

   I could not replicate this issue. Could you show me the code you're using to import the angular-plotly.js module and an example of graph data ?
5. ssalveMobiltex commented on Jun 23, 2023

   

   ssalveMobiltex

   on Jun 23, 2023

   Author

   More actions

   eg.
   Step 1. Create a shared-plotly.module.ts
   Code:

   import { CommonModule } from '@angular/common';
   import { NgModule } from '@angular/core';
   import { PlotlyViaWindowModule } from 'angular-plotly.js';
   
   @NgModule({
     declarations: [],
     imports: [
       CommonModule,
       PlotlyViaWindowModule
     ],
     exports: [
       CommonModule,
       PlotlyViaWindowModule
     ]
   })

   Step 2: Import the shared module in your lazy loaded module

   import { CommonModule } from '@angular/common';
   import { NgModule } from '@angular/core';
   import { SharedPlotlyModule} from '../../shared-plotly.module';
   import { SharedModule } from '../../shared.module';
   import { GraphRoutingModule } from './graph-routing.module';
   import { GraphWrapperComponent } from './reading-graph-wrapper/graph-wrapper.component';
   import { GraphComponent } from './graph.component';
   
   @NgModule({
     declarations: [
       GraphComponent,
       GraphWrapperComponent
     ],
     imports: [
       CommonModule,
       GraphRoutingModule,
       SharedModule,
       SharedPlotlyModule
     ]
   })
   export class GraphModule { }

   Step 3: Code in Component

   <div>
       <plotly-plot class='chart' [data]="graph.data" [layout]="graph.layout" [config]="graph.config">
       </plotly-plot>
   </div>

   TS:

   graph;
     graphData = [];
     createGraph(result) {
       const X = [], Y = [];
       let fData, pData = {};
       if (Condition) {
         for (let index = 0; index < result.length; index++) {
           X.push(result.x),
             Y.push(result.y)
         }
         fData = {
           type: "scattergl",
           mode: "line",
           x: X,
           y: Y,
         }
         this.graphData.push(fData);
       }
       else if (Condition) {
           for (let index = 0; index < result.length; index++) {
           X.push(result.x),
             Y.push(result.y)
         }
         pData = {
           type: "scattergl",
           mode: "line",
           yaxis: 'y2',
           x: X,
           y: Y,
        
         }
         this.graphData.push(pData);
       }
       const layout = {
         title: 'Graph',
         yaxis: {domain: [0, 0.40], title: 'F'},
         yaxis2: {domain: [0.50,1], title: 'P'},
         showlegend: true,
         legend: { orientation: "h",
                   traceorder: 'reversed',
                   x: 0,
                   y: -0.2
         },
         height: 700
       }
       this.graph = {
         data: this.graphData,
         layout: layout,
         config: { responsive: true, displaylogo: false }
       };
     }
6. andrefarzat commented on Jun 25, 2023

   

   andrefarzat

   on Jun 25, 2023

   Collaborator

   More actions

   I can't see anything wrong with your code.
   Let's see if things go wrongly with plotly.js itself. I found an aleatory 3d graph. Please, open it and check if it's working properly in your browser: https://codepen.io/plotly/pen/MaxrwW

   Secondly, please fork this codepen and try to make it work within your data. I am trying to confirm that plotly.js is working correctly before attacking angular-plotly.js, for it's just a wrapper for plotly.js

Issue actions