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 }
    };
  }

Uh oh!

Web GL not supported issue #241

Description

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions