ng2modules-flot

Angular 2 wrapper for jquery flot plugin

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2modules-flot
0.0.17 years ago7 years agoMinified + gzip package size for ng2modules-flot in KB

Readme

ng2modules-flot
Angular 2 wrapper for flot plugin.
Get Started

installation

  1. Install ng2modules-flot using npm
$ npm i ng2modules-flot

  1. Install flot library and plugins using bower
$ bower install flot flot-spline flot.tooltip

  1. Include flot library and plugins in application via html, angular-cli or webpack.
Note that flot depends on jquery.
<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