ng2modules-flot

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 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]