Coder Social home page Coder Social logo

samcodex / ng-ax-path Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 1.0 504 KB

Angular 4 curved line chart component

License: MIT License

JavaScript 1.43% TypeScript 98.04% CSS 0.52%
angular angular2 angular4 d3 d3v4 typescript chart svg chart-component legend

ng-ax-path's Introduction

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

Legend_In_Block


Display legend outside the chart

Legend_Out_Block


Display legend on top of the chart

Legend_Out_Center

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

Authors

Samuel Xie

ng-ax-path's People

Contributors

samcodex avatar

Watchers

 avatar  avatar

Forkers

sharmarakesh

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.