# ng2modules-flot

> Angular 2 wrapper for jquery flot plugin

Latest version **0.0.1** (published 2017-01-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng2modules-flot
pnpm add ng2modules-flot
yarn add ng2modules-flot
bun add ng2modules-flot
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-01-13 |
| First published | 2017-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Guy Senpai |
| Maintainers | guysenpai |
| Keywords | ng2, ng2modules, angular2, flot, plotchart, circular progress, ng2modules-flot, angular2-flot |

## Links

- npm: https://www.npmjs.com/package/ng2modules-flot
- Repository: https://guysenpai@bitbucket.org/guysenpai/ng2modules-flot
- Homepage: https://bitbucket.org/guysenpai/ng2modules-flot#readme
- npm.io page: https://npm.io/package/ng2modules-flot

## Dependencies (2)

- [jquery](https://npm.io/package/jquery.md) ^3.1.1
- [jquery-migrate](https://npm.io/package/jquery-migrate.md) ^3.0.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-01-13

## README

# ng2modules-flot
Angular 2 wrapper for flot plugin.

# Get Started

## installation
1. Install ` ng2modules-flot ` using npm
```
$ npm i ng2modules-flot
```

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

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

```js
import { flotModule } from 'ng2modules-flot';

// In your app's module
imports: [
  flotModule
]
```

Use the flot directive into your component template:

```html
<flot [options]="options" [dataset]="dataset" height="550px" width="100%"></flot>
```

```js
@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]

---
_Source: https://npm.io/package/ng2modules-flot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._