Get started with angular-google-chart CDN

MIT licensed

Angular library: Easy Google Charts integration.

Tags:
  • angularjs
  • chart
  • google
  • directives
  • module

Stable version

Copied!

How to start using angular-google-chart CDN


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

declare var google: any;

@Component({
  selector: 'app-root',
  template: `
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  `
})
export class AppComponent {
  ngOnInit() {
    this.loadGoogleCharts();
    this.createChart();
  }

  loadGoogleCharts() {
    const script = document.createElement('script');
    script.src = 'https://cdn.cdnhub.io/angular-google-chart/0.1.0/ng-google-chart.min.js';
    script.async = true;
    document.head.appendChild(script);
  }

  createChart() {
    this.loadGoogleCharts().then(() => {
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(this.drawChart);
    });

    this.drawChart = () => {
      const data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
      ]);

      const options = {
        title: 'My Daily Activities',
        is3D: true
      };

      const chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
  }
}
Copied!
Copied!

All versions