integrasi chart dengan api

src/app/indikator/indikator.page.html

@@ -13,14 +13,14 @@
       <ion-title size="large">Grafik</ion-title>
     </ion-toolbar>
   </ion-header>
-<ion-content>
-  <ion-card>
-    <ion-card-title class="ion-padding-start">Line Chart</ion-card-title>
-    <ion-card-content class="ion-margin-top">
-      <div style="display: block; width: 100%; height: 150px;">
-        <canvas id="myChart"></canvas>
-      </div>
-      
-    </ion-card-content>
-  </ion-card>
-</ion-content>
+  <ion-content>
+    <ion-card *ngFor="let series of seriesData; let i = index">
+      <ion-card-title class="ion-padding-start">{{ series.series_name }}</ion-card-title>
+      <ion-card-content class="ion-margin-top">
+        <div style="display: block; width: 100%; height: 150px;">
+          <canvas id="chart-{{ i }}"></canvas>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </ion-content>
+</ion-content>

src/app/indikator/indikator.page.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { Platform } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
 import {
   IonHeader,
   IonToolbar,
@@ -13,8 +14,10 @@ import {
 } from '@ionic/angular/standalone';
 import { NgClass } from '@angular/common';
 import { Chart, registerables } from 'chart.js';
-import { ChartConfiguration, ChartOptions, ChartType } from "chart.js";
 import { BaseChartDirective } from 'ng2-charts';
+import { PengukuranService } from '../services/pengukuran.service';
+import { Storage } from '@ionic/storage-angular';
+
 
 Chart.register(...registerables);
 @Component({
@@ -23,6 +26,7 @@ Chart.register(...registerables);
   styleUrls: ['./indikator.page.scss'],
   standalone: true,
   imports: [
+    CommonModule,
     IonButtons,
     IonMenuButton,
     IonHeader,
@@ -37,33 +41,50 @@ Chart.register(...registerables);
   ],
 })
 export class IndikatorPage implements OnInit {
-  public below: boolean = false;
+  public seriesData: any[] = [];
 
-  constructor() {}
+  constructor(
+    private pengukuranService: PengukuranService,
+    private storage: Storage,
+    private cdr: ChangeDetectorRef
+  ) {}
 
-  ngOnInit() {
-    this.createChart();
+  async ngOnInit() {
+    await this.storage.create();
+    this.getDataGraph();
   }
 
-  createChart() {
-    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+  async getDataGraph() {
+    const id_identitas = await this.storage.get('id_identitas');
+    this.pengukuranService.getGraphByIdentitas(id_identitas).subscribe(
+      (response: any[]) => {
+        this.seriesData = response;
+        this.cdr.detectChanges();
+        this.seriesData.forEach((series, index) => this.createChart(series, index));
+      },
+      error => {
+        console.error('Error fetching data:', error);
+      }
+    );
+  }
+
+  createChart(series: { series_name: any; series_data: any; }, index: number) {
+    const canvas = document.getElementById(`chart-${index}`) as HTMLCanvasElement;
     const ctx = canvas.getContext('2d');
-
+    const labels = series.series_data.map((_: any, i: number) => (i + 1).toString());
     if (ctx) {
-      // Create a gradient for the chart background
       const gradient = ctx.createLinearGradient(0, 0, 0, 400);
-      gradient.addColorStop(0, 'rgba(0, 255, 0, 0.5)'); // Green area
-      gradient.addColorStop(0.33, 'rgba(255, 255, 0, 0.5)'); // Yellow area
-      gradient.addColorStop(0.66, 'rgba(255, 0, 0, 0.5)'); // Red area
+      gradient.addColorStop(0, 'rgba(0, 255, 0, 0.5)'); // Green
+      gradient.addColorStop(0.33, 'rgba(255, 255, 0, 0.5)'); // Yellow
+      gradient.addColorStop(0.66, 'rgba(255, 0, 0, 0.5)'); // Red
 
-      // Apply the gradient to the chart background
       new Chart(ctx, {
         type: 'line',
         data: {
-          labels: ['January', 'February', 'March'],
+          labels: labels,
           datasets: [{
-            label: 'Series A',
-            data: [0.5, 1.5, 2.5],
+            label: series.series_name,
+            data: series.series_data,
             borderColor: 'black',
             fill: true,
           }]
@@ -89,8 +110,6 @@ export class IndikatorPage implements OnInit {
             const ctx = chart.ctx;
             const chartArea = chart.chartArea;
             const chartHeight = chartArea.bottom - chartArea.top;
-
-            // Calculate gradient stops
             const greenStop = chartHeight * 0.33;
             const yellowStop = chartHeight * 0.66;