angular 8 google chartsangular 8 google charts

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 Google Charts working example.

Post Working:

In this post, I am showing google pie chart in Angular 8.
angular 8 google charts
angular 8 google charts

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 8 application on your machine:

$ npm install -g @angular/cli

$ ng new angularcharts // Set Angular8 Application on your pc

cd angularcharts // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

 

2. Now run below command into your terminal to include google chart package into your angular 8 application:

npm install angular-google-charts

 

3. Now add below code into your app.module.ts file:

import { GoogleChartsModule } from 'angular-google-charts';

   imports: [
    ...
    GoogleChartsModule.forRoot(),
  ]

 

4. Now add below code into your app.component.ts file:

myType = 'PieChart';
myData = [
    ['London', 8136000],
    ['New York', 8538000],
    ['Paris', 2244000],
    ['Berlin', 3470000],
    ['Kairo', 19500000]
  ];

 

5. Finally add, below code into your app.component.html file:

<google-chart [type]="myType" [data]="myData" ></google-chart>

 

This is it and if you have any kind of query then please let me know.

Jas

Thank you

By therichpost

Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

29 thoughts on “Angular 8 Google Charts working example”
  1. Hi Ajay, Thanks for the tutorial. How do we reference the chart again, say on a mouse move event? In JS there is something like var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’)) but how do we do this in Angular 8.

  2. Yes. I need a mouse move on the chart so I can get the value of the X axis where the tooltip is.

  3. hi ajay i need to display data from from rest response in google chart can you help ?

  4. yes i want to show dynamic data as soon as i click button i should change data in graph

  5. Hi Ajay , What if I want show multiple charts on one page like say 3 to 4 different charts with different data how can we do that

  6. Hi Ajay, I want to display data retrieved from DB through rest api and in different types of charts. How can i do that. Can you update on this please.

  7. Hi Ajay,
    I need to make a google chart using Angular 9 and want to use the data in my database hosted on Amazon RDS. And the data should be fetched using PHP. Can you help me?

  8. Any idea how to use google.visualization.events.addListener() with your tutorial ? Thanks in advance

  9. Hi Ajay, can you take a look at my code and help me? I am using data from mysql for the chart? The function map seems to break. It works for a day and then the whole app crashes. I can add my code here?

  10. TypeError: Cannot read property ‘loadChartPackages’ of undefined at GoogleChartComponent.ngOnInit…..
    I am getting this error on angular 8. Please help

  11. AppComponent.html:5 ERROR TypeError: Cannot read property ‘ngMetadataName’ of undefined at injectArgs.
    I’m having this error can anyone help me plz..
    i’m using angular cli 8.0.3

  12. node_modules/angular-google-charts/lib/components/google-chart/google-chart.component.d.ts(85,9): error TS1086: An accessor cannot be declared in an ambient context.

    I am getting this error. Can you help?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.