Angular 2 and 4 library for support of dygraphs(http://dygraphs.com) charts.
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} // 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'To install ng-dygraphs use
npm install ng-dygraphs --savedygraphs is a dependency and should be installed along with the module.
and then from your Angular AppModule:
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:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<!-- 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}
-->
<ng-dygraphs
[data]="data"
[options]="options">
</ng-dygraphs>in angular-cli.json
"styles": [
"styles.css",
"../node_modules/dygraphs/dist/dygraph.min.css"
],
"scripts": [
"../node_modules/dygraphs/dist/dygraph.min.js"
],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.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'
// }
// });To build the module:
npm run buildTo lint all *.ts files:
npm run lintYou can check out Ludwig's docker ng-dygraph with angular-cli integration. https://hub.docker.com/r/ludwigprager/ng-dygraph-cli/
MIT © Ivan Stepić