Hello to all, welcome to therichpost.com. In this post, i will tell you, Angular 10 Google Charts with PHP Json Data.
angular 10 google charts with php data
Angular google charts with php data
Here is the code snippet and please follow carefully:
1. Very first, here are common basics steps to add angular 10 application on your machine:
npm install -g @angular/cli
ng new angularcharts // Set Angular10 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 10 application:
npm install angular-google-charts
Â
3. Now add below code into your app.module.ts file:
import { GoogleChartsModule } from 'angular-google-charts';
import { HttpClientModule } from '@angular/common/http';
imports: [
...
GoogleChartsModule.forRoot(),
HttpClientModule
]
Â
4. Now add below code into your app.component.ts file:
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 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, , Angular 16, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.
20 comments
This line doesn’t work for me: //Convert json to array
this.cartkey = data.map(function(item, keys) {
It doesn’t recognise map. My error message is : ‘Property map does not exist on type ‘Object’.
Can you pls advise?
Try this and let me know, is this work for you:
import { map } from “rxjs/operators”;
Hi your above solution isn’t working. Any other way i can get it to work?
Can you please show me the error?
Thanks
Hi Ajay, still getting below error.
Property ‘map’ does not exist on type ‘Object’.
@angular/cli – 10.0.8
rxjs – 6.5.5
Works like charm. Thank you
Thank you karen.
Hi, I get some errors while implementing your example. I have listed them below :
Cannot read property ‘loadChartPackages’ of undefined.
Cannot read property ‘ngMetadataName’ of undefined.
can you help me sort them out?
For this, I need to see your code..
Ok….I am sending you my code on email. Please have a look. thanks in advance
Okay, I will check that. Thanks
Send..
Okay I will check it.
can you give an example of column chart ??
Angular Column Charts?
angular 8/9 with google column chart..
Will update you soon. Thanks
ok..
Check please:
https://therichpost.com/angular-10-google-column-chart-working-example/
i want to display data from mysql database on a chart. How can i do that?