Skip to content

Usage.md

Latest commit

 

History

History
57 lines (51 loc) · 1.56 KB

Usage.md

File metadata and controls

57 lines (51 loc) · 1.56 KB
Raw

Usage

Import the Ng2GoogleChartsModule in your app.module.ts:

import { Ng2GoogleChartsModule, GoogleChartsSettings } from 'ng2-google-charts';

// const MyGoogleChartsSettings: GoogleChartsSettings = {
//   mapsApiKey: 'YOUR_API_KEY',
//   googleChartsVersion: '46',
//   language: 'it',
// };

@NgModule({
  ...
  imports: [
    ...
    Ng2GoogleChartsModule,
  ],
  providers: [
    // {
    //   provide: 'googleChartsSettings',
    //   useValue: MyGoogleChartsSettings,
    // },
  ],
})
export class AppModule { }

In your templates, use the google-chart component like this:

<google-chart [data]="pieChart"></google-chart>

and in the corresponding .ts file:

import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';

public pieChart: GoogleChartInterface = {
  chartType: GoogleChartType.PieChart,  // or chartType: 'PieChart'
  dataTable: [
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ],
  //firstRowIsData: true,
  options: {'title': 'Tasks'},
};

The value in dataTable will be passed to the setDataTable() method of ChartWrapper (documentation). If firstRowIsData is true, dataTable will be first passed to arrayToDataTable(dataTable, true) (documentation).