CODEWITHSUNDEEP
angular5dygraphs
ael
ael

Reputation: 534

Angular5: Dygraph is not defined in runtime

Using Angular 5 combined with dygraphs library, in runtime I receive an error: 'Dygraph is not defined', although dygraphs library is installed.

component.ts file:

import { Component, AfterViewInit } from '@angular/core';

declare var Dygraph: any;

@Component({
...
})
export class MyComponent implements AfterViewInit {

  constructor() {
  }

  ngAfterViewInit() {
      let div = document.getElementById('divId');
      new Dygraph(div, "Time,Value\n", {});
  }
}

component.html file:

<div id="divId"></div>

package.json file:

 "dependencies": {
    ...
    "dygraphs": "^2.1.0",
  },

Is it possible to use pure dygraphs with Angular2+ ? There is ng-dygraphs library, but I would like to use pure dygraphs.

Upvotes: 0

Views: 1285

Answers (3)

cyperpunk
cyperpunk

Reputation: 702

You need to install both dygraphs and types/dygraphs package into your Angular Project

npm i dygraphs --save npm i @types/dygraphs --save After that just write this in the component you are using the Dygraphs

declare var Dygraph:any;

It worked out for me. It didn't showed me any errors while using them. I was working with Angular 8.

Upvotes: 0

jwal
jwal

Reputation: 660

While I feel I hacked much of this it did get a relevant result. Three instances of dygraphs on the webpage. I initially tried with ng-dygraphs without success so I tried to insert dygraphs without the wrapper using the info at https://github.com/danvk/dygraphs-es6 coupled with the earlier answer here from Andrei Tătar.

I did not edit the package.json file as in the Q. The missing piece without the wrapper was to add typings (having already added dygraphs and ng-dygraph and doing this within an angular-cli built project):

ng add @types\dygraphs

then this code worked

<div #graph></div>

with the component details (@ViewChild magic from Creating Angular2 component/directive wrapper for Dygraphs.)

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import Dygraph from 'dygraphs';

@Component({
  selector: 'app-dygraph',
  templateUrl: './dygraph.component.html',
  styleUrls: ['./dygraph.component.css']
})
export class DygraphComponent implements OnInit {
  @ViewChild('graph')
  graphdiv: ElementRef;
  ngOnInit() {
    new Dygraph(this.graphdiv.nativeElement,
      `Date,A,B
      2016/01/01,10,20
      2016/07/01,20,10
      2016/12/31,40,30
      `, {
        fillGraph: true
    });  
  }

success with the graphs. So I went back to adding ng-graphs in again. And kept getting the same error so eventually I went in and edited

node_modules\ng-dygraphs\ng-dygraphs.es5.js

and

node_modules\ng-dygraphs\ng-dygraphs.js

to include the line:

import Dygraph from 'dygraphs';

ng-dygraphs then "found" Dygraphs and ... I got three trends that way too.

My app.component.html file has three of hence the three trends.

<app-dygraph></app-dygraph>
<app-dygraph></app-dygraph>
<app-dygraph></app-dygraph>

Disclaimer: I just hacked this until it worked for me. YMMV.

Upvotes: 2

Andrei Tătar
Andrei Tătar

Reputation: 8295

The problems is that typescript doesn't know the types and you also need to import what you use Dygraph from the module dygraphs. Try to install the typing files:

npm install --save-dev @types/dygraphs

and in your file: 

import Dygraph from 'dygraphs';

... 

new Dygraph(...)

Upvotes: 0

Related Questions