ng-dygraphs

Angular 2+ and 4+ library for support of dygraphs() charts.

Supported features of dygraphs

Then only thing you will need to pass are data and options (for detailed information look at ). ```js data // data property needs to be defined as attribute in the component 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 // options object needs to be defined as attribute in the component and consist of valid options http://dygraphs.com/options.html // options = {width: 'auto', labels: 'x','y', xlabel: 'x', ylabel: 'y', animatedZooms: true, pointSize: 4} ```

Custom features

```js // posibility to turn on/off some of chart values http://dygraphs.com/tests/visibility.html customVisibility // default value is 'false' // define size of chart chartWidth // default value is 640 chartHeight // default value is 480 // define custom message when there is no data noDataLabel // default value is 'NO DATA AVAILABLE' ```

Installation

To install ng-dygraphs use ```bash npm install ng-dygraphs --save ``` dygraphs is a dependency and should be installed along with the module.

Usage

and then from your Angular AppModule: ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import ng-dygraphs library import { NgDygraphsModule } from 'ng-dygraphs'; @NgModule({ declarations:

AppComponent

, imports:

BrowserModule,

// Specify NgDygraphsModule library as an import

NgDygraphsModule

, providers: , bootstrap: AppComponent }) export class AppModule { } ``` Once ng-dygraphs library is imported, you can use ng-dygraphs component in your Angular application: ```html data="data" options="options"> ```

Additional settings to include this library with angular-cli

in angular-cli.json ```json

"styles": [

"styles.css",

"../node_modules/dygraphs/dist/dygraph.min.css"

],

"scripts": [

"../node_modules/dygraphs/dist/dygraph.min.js"

],

```

Additional settings to include this library in your angular2+ project

example of integration with one of most popular angular2 seeds in /tools/config/project.config.ts ```typescript

// Add `NPM` third-party libraries to be injected/bundled.

this.NPM_DEPENDENCIES = [

...this.NPM_DEPENDENCIES,

{ src: 'dygraphs/dist/dygraph.min.js', inject: 'libs' },

//for version "dygraphs": "1.1.1" use this bellow

//{ src: 'dygraphs/dygraph-combined.js', inject: 'libs' },

{ src: 'dygraphs/dist/dygraph.min.css', inject: true, vendor: true }

];

this.mergeObject(this.SYSTEM_BUILDER_CONFIG, {

packages: {

'ng-dygraphs' : {

main:'lib/index.js',

defaultExtension: 'js'

}

}

});

// Add packages (e.g. ng2-translate)

const additionalPackages: ExtendPackages[] = [{

name: 'ng-dygraphs',

// Path to the package's bundle

path: 'node_modules/ng-dygraphs/lib/index.js'

}];

this.addPackagesBundles(additionalPackages);

// in older version of seed you may try this code bellow

// this.mergeObject(this.SYSTEM_CONFIG_DEV, {

// paths: {

//   'ng-dygraphs': 'node_modules/ng-dygraphs/lib/index.js'

// }

// });

```

Development

To build the module: ```bash npm run build ``` To lint all *.ts files: ```bash npm run lint ```

Docker

You can check out Ludwig's docker ng-dygraph with angular-cli integration.

License

MIT © Ivan Stepić