ng-dygraphs
Angular 2+ and 4+ library for support of dygraphs(http://dygraphs.com) charts.
Supported features of dygraphs
Then only thing you will need to pass are data
and options
(for detailed information look at http://dygraphs.com/options.html).
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
// 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
npm install ng-dygraphs --save
dygraphs
is a dependency and should be installed along with the module.
Usage
and then from your Angular AppModule
:
;; ; // Import ng-dygraphs library;
Once ng-dygraphs library is imported, you can use ng-dygraphs component in your Angular application:
<!-- You can now use your library component in app.component.html --> {{title}}<!-- 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}-->
Additional settings to include this library with angular-cli
in angular-cli.json
"styles": , "scripts": ,
Additional settings to include this library in your angular2+ project
example of integration with one of most popular angular2 seeds https://github.com/mgechev/angular-seed/
in /tools/config/project.config.ts
// Add `NPM` third-party libraries to be injected/bundled. this.NPM_DEPENDENCIES = ; this.mergeObjectthis.SYSTEM_BUILDER_CONFIG, ; // Add packages (e.g. ng2-translate) ; this.addPackagesBundlesadditionalPackages; // 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:
npm run build
To lint all *.ts
files:
npm run lint
Docker
You can check out Ludwig's docker ng-dygraph with angular-cli integration. https://hub.docker.com/r/ludwigprager/ng-dygraph-cli/
License
MIT © Ivan Stepić