@benpeterscode/angularfirecharts v0.0.6

AngularFireCharts

AngularFireCharts is a lightweight package for angular that allows you to create charts using chart.js and data from firebase realtime database.

Installation

This package requires chart.js and firebase

$ npm i @benpeterscode/angularfirecharts chart.js firebase

Add to your project

import * as firebase from 'firebase/app';
import { AngularFireChartsModule } from '@benpeterscode/angularfirecharts';

// This is your firebase api key.
var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};

firebase.initializeApp(config);

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...,
    AngularFireChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to structure your data in realtime database

You will need to structure your data where key is the x-axis point and value is the y-axis point.

Displaying a chart

app.component.html

<angularfirechart 
    [nodePath]="data" 
    [type]="type"
    [label]="label" 
    [borderColor]="color"
     >
</angularfirechart>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  // Path to firebase node
  data = '/data'

  //Chart heading
  label = 'My Dataset'

  //Chart type
  type = 'line'

  //Chart color
  color = '#3cba9f'

  constructor() { 

  }

}

Result

License

MIT

Free Software, Hell Yeah!