https://github.com/eshwarrachala/angular-d3

https://github.com/eshwarrachala/angular-d3

angular angular2-service nvd3

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/eshwarrachala/angular-d3
• Owner: EshwarRachala
• Created: 2017-05-01T02:31:01.000Z (over 7 years ago)
• Default Branch: dev
• Last Pushed: 2017-06-06T04:39:36.000Z (over 7 years ago)
• Last Synced: 2024-09-30T07:23:28.725Z (4 days ago)
• Topics: angular, angular2-service, nvd3
• Language: TypeScript
• Size: 1.39 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# ngnvd3

## Installation

To install this library, run:

```bash

$ npm install ngnvd3 --save

```

## nvd3 examples 

http://ngnvd3.surge.sh/

## Examples Repo

Reference `https://github.com/EshwarRachala/angular-d3-demo` for examples.

## Consuming the library

Import the library in any Angular application by running:

```bash

$ npm install ngnvd3

```

and then from your Angular `AppModule` inject Chartservice and import chartmodule

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ChartModule,ChartService } from 'ngnvd3';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    ChartModule

  ],

  providers: [ChartService],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

## To use angular ChartsService

```typescript

import { ChartService, NV, D3 } from 'ngnvd3';

@Component({

  selector: 'app-chart',

  template: `


                

             
`

})


export class ChartComponent implements OnInit, OnChanges {

    private nv: NV;

    private d3: D3;

    private data: any; // provide data for the chart 

    chart: nv.BoxPlotChart; 

    constructor(private service: ChartService) {

         this.nv = service.getnvD3();

        this.d3 = service.getD3();

     }

    ngOnInit() {

        this.createChart();

        if (this.data) {

            this.updateChart();

        }

    }

    ngOnChanges() {

        if (this.chart) {

            this.updateChart();

        }

    }

    createChart() {

    this.chart = nv.models.boxPlotChart()

            .x(function (d) { return d.label })

            .staggerLabels(true)

            .maxBoxWidth(75)

            .yDomain([0, 500]);

    }

    updateChart() {

      d3.select('#boxplot svg')

            .datum(this.data)

            .transition()

            .duration(350)

            .call(this.chart);

      nv.utils.windowResize(this.chart.update);

  }

}

```

## To use Chart components directly

```typescript

import { ChartConfig } from 'ngnvd3';

import { Component } from '@angular/core';

@Component({

  selector: 'app-demo',

  template: `submit

                `

})

export class DemoComponent {

  public config: ChartConfig = {};

  constructor() {

    this.getconfig();

  }

  getconfig() {

    this.config = {};

    this.config.margin = { left: 100 };

    this.config.height = 500;

    this.config.data = [

      {

        'key': 'Series 1',

        'color': '#d67777',

        'values': [

          {

            'label': 'Group A',

            'value': 1.8746444827653

          },

          {

            'label': 'Group B',

            'value': 8.0961543492239

          }

        ]

      }

    ];

  }

  click(event) {

    this.getconfig();

    this.config.height = 600;

    event.preventDefault();

  }

}

```

## Available charts

```typescript

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash

$ npm run build

```

To lint all `*.ts` files:

```bash

$ npm run lint

```

## Further help

http://nvd3.org/index.html

## License

MIT © [eshwar rachala](mailto:[email protected])