Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 12ChartjsIonic 5Php

Ionic 5 Angular 12 Chartjs with Dynamic Data

Ionic 5 Angular 12 Chartjs with Dynamic Data

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

Guys with this post we will do below things:

  1. Ionic 5 with Angular 12.
  2. Add Chart.js in Ionic 5.
  3. Dynamic chart data from PHP MySQL in Ionic 5.

Guys here you can see working video:

Working Video
Ionic 5 Angular 12 Chartjs with Dynamic Data
Ionic 5 Angular 12 Chartjs with Dynamic Data
Ionic 5 chart.js php mysql data
Ionic 5 php mysql data

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 IONIC 5 and 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 @ionic/cli

ionic start myApp blank

cd myApp

npm install angular2-chartjs

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

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 ...
  imports: [
         ...
         HttpClientModule],
  ...
})
export class AppModule {}

3. Guy’s now we need to add below code inside myApp/src/app/home/home.module.ts file:

...
import { HttpClientModule } from '@angular/common/http';
import { ChartModule } from 'angular2-chartjs';



@NgModule({
  imports: [
  ...
    HttpClientModule,
   
    ChartModule
    
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

4. Guy’s now we need to add below code inside myApp/src/app/home/home.page.ts file:

...

import { HttpClient } from '@angular/common/http';

export class HomePage {

 data:any;
 barchart:any;
  constructor(  private http:HttpClient){}
 
 
  //Bar Chart
  type = 'bar';
  options = {
   responsive: true,
   maintainAspectRatio: true,
   scales: {
       yAxes : [{
           ticks : {
               max : 100,    
               min : 0
           }
       }]
   }
};

    ngOnInit() {
    

        //web api call
        this.http.get('http://localhost/data.php').subscribe(data => {
          this.barchart = data;
          
         
          this.data = {
              labels: this.barchart[0], //months
              datasets: [{
              label: "Angular 11",
              data: this.barchart[1][0],
              backgroundColor: "#f38b4a",
              },{
                  label: "Angular 12",
                  data: this.barchart[1][1],
                  backgroundColor: "#6970d5",
              }]
          };

          
  });

 
    }
    
  

}

5. Guy’s now we need to add below code inside myApp/src/app/home/home.page.html file:

<ion-content [fullscreen]="true">
        <chart [type]="type" [data]="data" [options]="options"></chart>
</ion-content>

6. 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');
$months = array("January", "May", "June", "July");
$sales = array(array("45", "60", "25", "45"), array("35", "50", "60", "45"));
echo json_encode(array($months,$sales));
die();
 ?>

Now in the end please run ionic 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

therichpost
the authortherichpost
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 14, Angular 15, Angular 16, Angular 17, 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.