Get started with angular-google-chart CDN
MIT licensed
Angular library: Easy Google Charts integration.
Tags:- angularjs
- chart
- 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!