0.0.1 • Published 7 years ago
ng2modules-flot v0.0.1
ng2modules-flot
Angular 2 wrapper for flot plugin.
Get Started
installation
- Install
ng2modules-flot
using npm
$ npm i ng2modules-flot
- Install
flot
library and plugins using bower
$ bower install flot flot-spline flot.tooltip
- Include
flot
library and plugins in application viahtml
,angular-cli
orwebpack
. Note thatflot
depends onjquery
.
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="bower_components/Flot/jquery.flot.js"></sccript>
<script src="bower_components/Flot/jquery.flot.pie.js"></script>
<script src="bower_components/Flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot-spline/js/jquery.flot.spline.js"></script> // this is for flot-spline plugin
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script> // this is for flot.tooltip plugin
Usage
Import the module to your module:
import { flotModule } from 'ng2modules-flot';
// In your app's module
imports: [
flotModule
]
Use the flot directive into your component template:
<flot [options]="options" [dataset]="dataset" height="550px" width="100%"></flot>
@Component({})
export class MyComponent {
public dataset: any;
public options: any;
constructor() {
this.dataset = [{label: "line1", data: [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370]]}];
this.options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
};
}
}
Options
For options see https://github.com/flot/flot/blob/master/API.md
0.0.1
7 years ago