ng-ax-path

Angular curved line chart component for web and Ionic application

Description

ng-ax-path creates a curved line chart with two dimensions base on the passing individual data points. Compatible with Ionic 2, Angular2 and Angular4 versions.

Display legend inside the chart

Display legend outside the chart

Display legend on top of the chart

Installation

npm install ng-ax-path --save

Usage

import NgCanvasModule inside your module to be able to use ng-ax-path component.

import { NgCanvasModule } from 'ng-ax-path';
 
@NgModule({
  imports: [
    ...
    NgCanvasModule
  ],
  ...
})
export class YourModule {}

Code Examples

1. add ng-ax-path component into html template - app.component.html <ng-ax-path [canvas]="canvas">

2. set ng-ax-path data in component class - app.component.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
 
import { Canvas, Axis, Path, Point, LegendStyle, LegendShape, PathType, PointShape, CanvasStyle, SVG_ELEMENT_TYPE } from '../../../src';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  canvas: Canvas;
 
  constructor(private http: Http) {}
 
  ngOnInit() {
    const canvas = this.canvas = new Canvas('Demo', {width: 600, height: 400}, CanvasStyle.Coordinate, [30, 130]);
    canvas.legendShape = LegendShape.CIRCLE;
    canvas.legend = LegendStyle.BOTTOM_CENTER_OUT_LINE;
    // canvas.defaultMargin = {left:0, top: 0, right: 1, bottom: 1};
 
    // xAxis.options.disableAxisLine = true;
    canvas.createX('Time', 'months', {tickInterval: 3, extraSpace: 3});
    canvas.yAxis = new Axis(SVG_ELEMENT_TYPE.AXIS_Y, 'Weight', 'kg', {extraSpace: 10});
    const xAxis = canvas.getX();
    xAxis.options.tickInterval = 3;
 
    const yAxis = canvas.getY();
 
    // add path from Path instance
    const data = [[0,0],[3,10],[6,18],[9,16],[12,22],[13,26],[15,30],[18,40],[20,60],[22,62],[24,50]];
    const points: Point[] = data.map(d=>new Point( d[0], d[1] ));
    const path = new Path(points, 'Data Set 1 - 2014');
    canvas.addPath(path);
 
    // add path from tuple[number, number]
    const data2: [number, number][] = [[2,10],[4,18],[7,26],[9,60],[10,40],[12,60],[16,80], [18,90], [20,120]];
    const path2 = canvas.addPath(data2, 'Data 2');
    path2.color = 'red';
    path2.pointShape = PointShape.SQUARE;
 
    // add path from Points[]
    const data3 = [[2,53],[4,57],[7,64],[9,73],[10,84],[12,100],[16,97], [18,102], [20,78], [22,68]];
    const points3: Point[] = data3.map(d=>new Point( d[0], d[1] ));
    const path3 = canvas.addPath(points3, 'Data 3');
    path3.color = 'blue';
    path3.hasDot = false;
 
    // add path with Observable
    // this.http.get('assets/data/data1.json').subscribe(d=> {
    //   canvas.addPath(d.json(), 'Data from Json').color = 'purple';
    //   canvas.buildGroup();
    // });
 
    // Observable, data format [[number, number]]
    const path4 = canvas.addPath(
      this.http.get('assets/data/data1.json')
        .map(d => <[number, number][]>d.json()),
      'Data from Json'
    );
    path4.color = 'purple';
    path4.pathType = PathType.STRAIGHT_LINE;
    path4.pointShape = PointShape.TRIANGLE;
 
    // Observable, data format [{x,y}]
    canvas.addPath(
      this.http.get('assets/data/data2.json')
        .map( d => <{x: number, y: number}[]>d.json().map(c => ({ x: c[0], y: c[1] }))),
      'Data Set 5 Json'
    ).color = 'green';
  }
}

Canvas Style

CanvasStyle.Coordinate      // with canvas title, legend, axis line, tick line
CanvasStyle.CanvasBoard     // with tick line, no title, legend and axis line

Legend Shape

LegendShape.LINE
LegendShape.CIRCLE
LegendShape.RECTANGLE
LegendShape.ELLIPSE

Legend Style

LegendStyle.UP_LEFT_IN_BLOCK
LegendStyle.UP_LEFT_IN_LINE
LegendStyle.UP_RIGHT_IN_BLOCK
LegendStyle.UP_RIGHT_IN_LINE
LegendStyle.BOTTOM_LEFT_IN_BLOCK
LegendStyle.BOTTOM_LEFT_IN_LINE
LegendStyle.BOTTOM_RIGHT_IN_BLOCK
LegendStyle.BOTTOM_RIGHT_IN_LINE
LegendStyle.UP_CENTER_IN_LINE
LegendStyle.BOTTOM_CENTER_IN_LINE
LegendStyle.UP_CENTER_OUT_LINE
LegendStyle.UP_LEFT_OUT_LINE
LegendStyle.UP_RIGHT_OUT_LINE
LegendStyle.BOTTOM_CENTER_OUT_LINE
LegendStyle.UP_LEFT_SIDE_BLOCK
LegendStyle.UP_RIGHT_SIDE_BLOCK
LegendStyle.BOTTOM_LEFT_SIDE_BLOCK
LegendStyle.BOTTOM_RIGHT_SIDE_BLOCK

Built With

• d3
• cspl.

Authors

Samuel Xie