mpx200 / ng-dygraphs Goto Github PK

Spent about a day on this wondering why I had followed all directions but couldn't get it to work. I kept getting an error in the JS console in Firefox sayingERROR ReferenceError: Dygraph is not defined. The Dygraph object just showing a spinning bubble wheel in the browser. No amount of searching the internet for combinations of the error message, Angular, Dygraph, ng-dygraphs, etc came anywhere close to a solution. I branched out and started researching how to use an existing JS library within angular and after very careful reading I noticed one little statement that said you need to restart 'ng serve' in order for the modifications to angular.json (angular-cli.json in the instruction) to be picked up.

I have created a new project using ng new my-project. I followed the directions so that the following template (app.component.html) shows a chart with data and responds appropriately to the options shown.

<ng-dygraphs 
   [data]=[[1,2],[2,3],[3,0],[4,1]]
   [options]={width:-1,stepPlot:true}>
</ng-dygraphs>

If I try to use any option that has a type of string then the Digraph chart will not display. For example, if I modify the template as shown below then the chart will not render. (see [options]={width:'auto',...)

<ng-dygraphs 
   [data]=[[1,2],[2,3],[3,0],[4,1]]
   [options]={width:'auto',stepPlot:true}>
</ng-dygraphs>

In addition, putting any spaces in the original template field options will generate an error in the JS console. I do not know if this is my error in syntax but the README.md file contains the following comments which will introduce this error:

<!-- data property needs to be  defined in your controller and in native array format http://dygraphs.com/data.html#array
  
  data = [[new Date("2008/05/07"), 75],
          [new Date("2008/05/08"), 70],
          [new Date("2008/05/09"), 80]
         ];
  
  options = {width: 'auto', labels: ['Date','Temperature'], xlabel: 'X label text', ylabel: 'Y label text', title: 'Working title :)', animatedZooms: true, pointSize: 4}
-->

To include the component in the project, the import statement has to look like this,

import {NgDygraphsComponent} from "ng-dygraphs/lib/src/ng-dygraphs.component";

Update index.ts to export the component and module

export { NvD3Component } from './lib/ng2-nvd3.component';
export { NvD3Module } from './lib/ng2-nvd3.module';

Angular has changed its file name and the instructions should address this to avoid noise on various Q&A forums.

Module crashed if no [labels] is provided.
Problem occurs @ https://github.com/mpx200/ng-dygraphs/blob/master/src/ng-dygraphs.component.ts#L41

With latest version of ng-dygraphs (don't know with prior also) when data is binded, and changed often, ng-dygraphs does not release resources. Data are accumulated in the memory. There is no way to fix it.

If ng-dygraphs is replaced with a regular dygraph, the problem does not occur.

Demo Link: http://dygraphs.com/tests/smooth-plots.html

It seems impossible to access the chart methods such as .resetZoom() and .xAxisRange() as described here: http://dygraphs.com/jsdoc/symbols/Dygraph.html
Because _g (the chart instance) is private so we can't access it. Also NgDygraphsComponent isn't exported in index.ts (but available by importing ɵa from 'ng-dygraphs').

Is there a good reason to keep _g and NgDygraphsComponent private?

FYI: angular2-chartjs use this way to allow developers to access to the chart instance (emn178/angular2-chartjs#2 (comment))

I am using Angular7 and want to integrate ng-dygraphs.
I am trying to integrate but got some error like: "ng-dygraphs is not defined".

Send me solution if anyone has.

Thank you..

Hi, I spent days trying to make it work without success. How can you reproduce this example this ng-dygraph ?
http://dygraphs.com/gallery/#g/resize

I tried a lot of things but I cannot apply style to the graph div.

Kind regards

Since updating from 0.3.5 to 0.3.8/0.3.9 I get some weird errors when I want to start my application:

Uncaught ReferenceError: exports is not defined at scripts.bundle.js:sourcemap:44808

GET http://localhost:4200/ng-dygraphs.component.html 404 (Not Found)

Unhandled Promise rejection: Failed to load ng-dygraphs.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ng-dygraphs.component.html

When I go back to 0.3.5 everything works fine.

In light of issue #18, I would like to propose to switch to using ng-packagr as the packager of this NgModule.

Advantages

• It produces es5 compatible code.
• It produces es6 compatible code.
• It produces umd bundle code.
• Produces code that works out of the box with both ts and js angular projects

Disadvantages

• Requires to read the manual (RTFM)

A good tutorial on how to use it can be found here.

You can see it in action @ https://github.com/JimiC/ng-dygraphs/tree/ng-packagr.

@mpx200 Thoughts?

Hi,

i get the following error:

core.js:1440 ERROR ReferenceError: Dygraph is not defined
at eval (ng-dygraphs.es5.js:59)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4724)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at ZoneTask.invokeTask (zone.js:496)
at ZoneTask.invoke (zone.js:485)
at timer (zone.js:2025)`

I did install ng-dygraphs with

npm install ng-dygraphs --save
but got the following warning:

npm WARN @schematics/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @schematics/[email protected] requires a peer of @angular-devkit/[email protected] but none is installed. You must install peer dependencies yourself.`

I added the module in app.module and I called it like that:

<ng-dygraphs [data]="data" [options]="options"> </ng-dygraphs>

Can you guys help me out with this? I looks like it can not find the Dygraphs library. Any dependency issue?

There is a mismatch between the variable loadingChartInProgress used in html and lodingInProgress used in ts causing loader to not show.

Hello! I faced with a compilation error. It seems that module is a slightly out of date.

TS2346: Supplied parameters do not match any signature of call target.

How can I reproduce the dygraphs dark mode example:

http://dygraphs.com/gallery/#g/range-selector

Any guidance on how to properly adjust the class of the div container?

<div style="background-color: #101015; color: white">
    <p>Dark background, custom range selector gradient color.</p>
    <div id="darkbg" style="width:600px; height:300px;"></div>
</div>

Thank you.

Using the 0.3.7 and trying to build an ng projects results to failure due to providing typings in the lib folder. Providing those typings are redundant cause we already ship the ts src code along.

Is there any way to synchronize charts in Angular?

Angular compiler complains about the umd module.

WARNING in ./~/ng-dygraphs/lib/index.js
9:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted