Categories

Saturday, October 23, 2021
therichposts@gmail.com
Angular 12HighChartsPhp

Angular 12 HighCharts with Dynamic Data Working Example

Angular 12 HighCharts with Dynamic Data Working Example

Hello my friends, welcome back to my blog and today in this blog post, I am going to tell you, Angular 12 HighCharts with Dynamic Data Working Example.

Guys with this post we will do below things:

  1. HighCharts with Angular 12.
  2. Dynamic chart data from PHP in Angular 12.

Guys here you can see working video:

Working Video
Angular 12 HighCharts with Dynamic Data Working Example
Angular 12 HighCharts with Dynamic Data Working Example

Guys please check the below links for more Ionic 5 and Angular 12 tutorials:

  1. Angular 12 Tutorials.
  2. Ionic 5 Tutorials

Friends here is the working code snippet and please use this carefully:

1. Firstly friends we need fresh ANGULAR 12 setup and for this we need to run below commands and during installation please select angular. Secondly we should also have latest node version installed on our system:

I am using blank template for easy understanding:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

npm i --save angular-highcharts highcharts

2. Guy’s now we need to add below code inside angulardemo/src/app/app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartModule } from 'angular-highcharts';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ChartModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Guy’s now we need to add below code inside angulardemo/src/app/app.component.ts file:

import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular1212';
  data : any;
  highchart : any
  constructor(  private http:HttpClient){}
  
    ngOnInit() {
    
      //web api call
      this.http.get('http://localhost/data.php').subscribe(data => {
       this.data = data;
       console.log(this.data[0]);
     
       
       this.highchart = new Chart({
        chart: {
          type: 'bar'
        },
        title: {
          text: 'Bar Chart'
        },
        credits: {
          enabled: false
        },
        series: [
          
          {
          type:'column',  
          name: 'Bar 1',
          data: this.data //dynamic data
          }
        ]
        });
      
    
      });
      

        }
        
}

4. Guy’s now we need to add below code inside angulardemo/src/app/app.component.html file:

<div class="container py-5">
<h1 class="text-center p-2">Angular 12 : HighCharts with Dynamic Data</h1>
<div [chart]="highchart"></div>
</div>

5. Now guys, now we need to create file data.php inside our xampp/htdocs folder and add below code inside users.php file:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods:POST,GET,PUT,DELETE');
header('Access-Control-Allow-Headers: content-type or other');
header('Content-Type: application/json');
$data = array(1, 2, 3, 4, 4.5);

echo json_encode($data);
die();
?>

Now in the end please run ng serve command to check the out on browser(localhost:8100) and also please start your xampp server as well for php.

Guy’s you have any kind of query then please comment below.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
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 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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