ng2-charts-boundary-lines

Chart and edit boundary lines for Angular based on Chart.js (with zoom plugin and dragdata plugin ) and ng2-charts.

• Charts measurements and boundary lines as time series
• Filters time series
  • Filters x-values by a certain amount of maximum ticks
  • Aggregates data in between ticks according to different strategies (e.g., show maximum value in between ticks)
• Change boundary lines
  • Drag data points of boundary lines to change them
  • Instantly emits changed values
  • Interpolates data between ticks linearly
• Zoom and pan
  • Zoom and pan using your mouse or finger
  • Filters data by start and end time on the x-axis to only render necessary data

Usage

Installation

1. You can install ng2-charts-boundary-lines using npm

npm install @perguard/ng2-charts-boundary-lines --save

2. You need to install Chart.js, ng2-charts`, and some plugins in your application as they are peer dependencies

npm install chart.js --save
npm install chartjs-plugin-annotation --save
npm install chartjs-plugin-dragdata --save
npm install chartjs-plugin-zoom --save
npm install hammerjs --save
npm install help --save
npm install ng2-charts --save

Integration

import { Ng2ChartsBoundaryLinesModule } from 'ng2-charts-boundary-lines';

// In your app's module:
imports: [
   Ng2ChartsBoundaryLinesModule
]

Usage

<ng2-charts-boundary-lines
  [traces]="traces"              
  [(lowerBaseline)]="lowerBaseline"
  [(upperBaseline)]="upperBaseline"
  [maxDataPoints]="48"           
  [width]=1000                   
  [height]=800>                  
</ng2-charts-boundary-lines>

Input values

Name	Type	Description	Required	Default
traces	ChartPoint[]	Actual measuements	Yes	undefined
lowerBaseline	ChartPoint[]	Lower boundaries	Yes	undefined
upperBaseline	ChartPoint[]	Upper boundaries	Yes	undefined
maxDataPoints	number	Amount of ticks	No	48
width	number	Width of chart	No	undefined
height	number	Height of chart	No	undefined

Output values

Name	Type	Description
lowerBaselineChange	ChartPoint[]	Adapted lower boundaries
upperBaselineChange	ChartPoint[]	Adapted upper boundaries

Run from source

Library

/projects/ng2-charts-boundary-lines is the root directory for the library.

/projects/ng2-charts-boundary-lines-demo is an example app to demonstrate the library.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm run test to execute the unit tests via Karma.

Start demo app

Run npm run start and navigate to http://localhost:4200/ to see the demo app.

Troubleshooting

Please use GitHub Issues to report bugs and feature requests.

Thank you!

License

The MIT License (see the LICENSE file for the full text)