https://github.com/eshwarrachala/bi-ng2charts-core

Angular d3 charts
https://github.com/eshwarrachala/bi-ng2charts-core

angular angular-service angular2 angular4 chart d3v4 typescript webpack2

Last synced: 6 days ago
JSON representation

Angular d3 charts

• Host: GitHub
• URL: https://github.com/eshwarrachala/bi-ng2charts-core
• Owner: EshwarRachala
• License: other
• Created: 2017-04-05T02:04:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-27T19:33:15.000Z (over 7 years ago)
• Last Synced: 2024-09-27T22:20:12.369Z (6 days ago)
• Topics: angular, angular-service, angular2, angular4, chart, d3v4, typescript, webpack2
• Language: JavaScript
• Homepage:
• Size: 19.5 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ng2Charts

This Library provides two different types of d3 charts

either we can use Basic charts(ex: BarChart, LineChart etc.) by using Angular module(`ChartsModule`)

or

we can use Angular 2 service (`ChartService`) which exposes d34.7 module along 

with Angular 2 predefined d3 functions 

## Import Library

Run

```js 

npm install ng2charts

```

Once installed 

```js 

import {ChartsModule, ChartService } from 'ng2charts'

```

## Utilizing Chart components

``

## Utilizing ChartService

import Service 

```js

import {ChartsModule, ChartService } from 'ng2charts'

@Component({

    selector: 'bar-chart',

    templateUrl: './bar-chart.component.html',

    styleUrls: ['./bar-chart.component.css'],

    providers: [ChartService]

})

 public chart: ChartService;

    constructor(chartService: ChartService) {

        this.chart = chartService;

    }

     const d3 = this.chart.d3;

        const line = d3.line()

            .x((d: any) => this.chart.xscale(d.text))

            .y((d: any) => this.chart.yscale(d.value));

            

        this.chart

            .SVG(this.target.nativeElement)

            .Scale(ScaleType.Time, Axis.x)

            .RangeRound(Axis.x)

            .Domain(Axis.x, d3.extent(data, (d: any) => d.text))

            .Axis(Axis.x)

            .Scale(ScaleType.Linear, Axis.y)

            .RangeRound(Axis.y)

            .Domain(Axis.y, d3.extent(data, (d: any) => d.value))

            .Axis(Axis.y)

            .Line(data, line);

```

### for more details reference bar-chart component in src folder

### to resolve d3, Install typings (add --g to install globally)

`typings install  --save dt~d3;`