diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
index 58c36df..26c2383 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
@@ -78,17 +78,13 @@
   </div>
 
   <!-- Multi-Select Filter -->
-  <div class="filter-control multiselect-container" *ngIf="filterType === 'multiselect'">
-    <div class="checkbox-group">
-      <div class="checkbox-item" *ngFor="let option of filterOptions">
-        <input type="checkbox" 
-               [value]="option" 
-               [checked]="filterValue && filterValue.includes(option)" 
-               (change)="onMultiselectChange(option, $event)"
-               class="clr-checkbox">
-        <label class="checkbox-label">{{ option }}</label>
-      </div>
-    </div>
+  <div class="filter-control" *ngIf="filterType === 'multiselect'">
+    <select [(ngModel)]="filterValue" 
+            (ngModelChange)="onFilterValueChange($event)"
+            multiple 
+            class="clr-select compact-multiselect">
+      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+    </select>
   </div>
 
   <!-- Date Range Filter -->
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
index cb32e8d..7424e96 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
@@ -201,29 +201,6 @@ export class CompactFilterComponent implements OnInit, OnChanges {
     this.onFilterValueChange(dateRange);
   }
   
-  // Handle multiselect checkbox changes
-  onMultiselectChange(option: string, event: any): void {
-    const isChecked = event.target.checked;
-    
-    // Ensure filterValue is an array
-    if (!Array.isArray(this.filterValue)) {
-      this.filterValue = [];
-    }
-    
-    if (isChecked) {
-      // Add option to selected values if not already present
-      if (!this.filterValue.includes(option)) {
-        this.filterValue = [...this.filterValue, option];
-      }
-    } else {
-      // Remove option from selected values
-      this.filterValue = this.filterValue.filter((val: string) => val !== option);
-    }
-    
-    // Emit the change
-    this.onFilterValueChange(this.filterValue);
-  }
-  
   // Load available keys from API
   loadAvailableKeys(): void {
     if (this.apiUrl) {
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts
index 2781144..19ae8fb 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-bar-runner',
@@ -24,8 +28,18 @@ export class BarRunnerComponent implements OnInit {
   JsonData;
 
   barData;
-  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private Dashtestservive:DashrunnerService,
+    private route: ActivatedRoute,
+    private dashboardService: Dashboard3Service,
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService
+  ) { }
 
   barChartLabels: any[] = [];
   barChartType: string = 'bar';
@@ -47,6 +61,13 @@ export class BarRunnerComponent implements OnInit {
       this.editId = this.route.snapshot.params.id;
       console.log(this.editId);
 
+      // Subscribe to filter changes
+      this.subscriptions.push(
+        this.filterService.filterState$.subscribe(filters => {
+          // When filters change, refresh the chart data
+          this.fetchChartData();
+        })
+      );
 
       this.dashboardService.getById(this.editId).subscribe((data)=>{
         console.log(data);
@@ -75,21 +96,60 @@ export class BarRunnerComponent implements OnInit {
             this.showlabel = ChartObject[i].showlabel;
             this.barChartLegend = ChartObject[i].chartlegend;
             console.log(this.TableName);
-            this.Dashtestservive.getChartData(this.TableName,"Bar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-              console.log(Ldata);
-              this.JsonData = Ldata;
-              this.barChartData = this.JsonData.barChartData;
-              this.barChartLabels = this.JsonData.barChartLabels;
-              
-             },(error) => {
-              console.log(error);
-             });
+            // Fetch data with filters
+            this.fetchChartData();
             break; // No need to continue the loop once the correct placeholder is found
           }
         }
       });
   }
    
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('BarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.barChartData = this.JsonData.barChartData;
+        this.barChartLabels = this.JsonData.barChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -97,5 +157,17 @@ export class BarRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
-
-}
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('BarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('BarRunnerComponent destroyed and cleaned up');
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts
index 5bb9632..1ff9551 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts
@@ -5,6 +5,10 @@ import { ChartConfiguration,  ChartDataset,  ChartOptions } from 'chart.js';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { DashrunnerService } from '../dashrunner.service';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-bubble-runner',
@@ -26,8 +30,13 @@ export class BubbleRunnerComponent implements OnInit {
   lineChartNoLabels: [] = [];
   ChartLegend = false;
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
     
   public bubbleChartOptions: ChartConfiguration['options'] = {
     // scales: {
@@ -87,6 +96,13 @@ export class BubbleRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
 
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
@@ -113,21 +129,60 @@ export class BubbleRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Bubble Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.bubbleChartData = this.JsonData.bubbleChartData;
-            // this.radarChartLabels = this.JsonData.radarChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('BubbleRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.bubbleChartData = this.JsonData.bubbleChartData;
+        // this.radarChartLabels = this.JsonData.radarChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -135,6 +190,19 @@ export class BubbleRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('BubbleRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('BubbleRunnerComponent destroyed and cleaned up');
+  }
 
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts
index 5c814f6..cf8bb21 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts
@@ -160,7 +160,27 @@ getlinechart(): any[] {
     return this._http.get(url);
   }
 
-
+  // New method to support filters
+  public getChartDataWithFilters(tableName: string, jobType: string, xAxis:any, yAxes:any, sureId: number | undefined, parameterField: string, parameterValue: string, filterParams: string): Observable<any> {
+    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
+    
+    // Add sureId if provided
+    if (sureId) {
+      url += `&sureId=${sureId}`;
+    }
+    
+    // Add parameter field and value if provided
+    if (parameterField && parameterValue) {
+      url += `&parameter=${encodeURIComponent(parameterField)}&parameterValue=${encodeURIComponent(parameterValue)}`;
+    }
+    
+    // Add filter parameters if provided
+    if (filterParams) {
+      url += `&filters=${encodeURIComponent(filterParams)}`;
+    }
+    
+    return this._http.get(url);
+  }
 
   //////////////////////////////////////////////
   
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
index 61f9a3c..39a7329 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
@@ -17,6 +17,8 @@ import { BubbleRunnerComponent } from './bubble-runner/bubble-runner.component';
 import { ScatterRunnerComponent } from './scatter-runner/scatter-runner.component';
 import { PolarRunnerComponent } from './polar-runner/polar-runner.component';
 import { RadarRunnerComponent } from './radar-runner/radar-runner.component';
+// Add FilterService import
+import { FilterService } from '../../dashboardnew/common-filter/filter.service';
 
 @Component({
   selector: 'app-dashrunnerline',
@@ -47,7 +49,9 @@ export class DashrunnerlineComponent implements OnInit {
 ];
 
   constructor(private Dashtestservive:DashrunnerService, private dashboardService: Dashboard3Service,private route: ActivatedRoute,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   ngOnInit(): void {
 
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts
index f92400c..c47dcb6 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts
@@ -5,6 +5,10 @@ import { ChartDataset, ChartType,   } from 'chart.js';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-doughnut-runner',
@@ -34,9 +38,14 @@ export class DoughnutRunnerComponent implements OnInit {
   }
   doughnutChartType: ChartType = 'doughnut';
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
     
     constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-      private router : Router,) { }
+      private router : Router,
+      // Add FilterService to constructor
+      private filterService: FilterService) { }
   ngOnInit(): void {
     this.doughnutChartData = this.doughnutData.chartData;
     this.doughnutChartLabels = this.doughnutData.chartLabels;
@@ -44,6 +53,14 @@ export class DoughnutRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
       this.workflowLine = data.dashbord1_Line[0].model;
@@ -71,21 +88,60 @@ export class DoughnutRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.doughnutChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Doughnut Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.doughnutChartData = this.JsonData.chartData;
-            this.doughnutChartLabels = this.JsonData.chartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('DoughnutRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.doughnutChartData = this.JsonData.chartData;
+        this.doughnutChartLabels = this.JsonData.chartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     // this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -93,6 +149,19 @@ export class DoughnutRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('DoughnutRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('DoughnutRunnerComponent destroyed and cleaned up');
+  }
 
 
 
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html
index 4761acc..9b55a47 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html
@@ -39,16 +39,35 @@
       </div> -->
       <div><button class="btn btn-primary" (click)="generatePDFFile()">Export</button></div>
       <div style="max-height: 400px; overflow: auto; padding: 10px;">
-      <table class="table">
+      <!-- Debug information -->
+      <div *ngIf="false" style="background-color: #f0f0f0; padding: 10px; margin-bottom: 10px;">
+        <h4>Debug Information</h4>
+        <p><strong>TableName:</strong> {{ TableName }}</p>
+        <p><strong>XAxis:</strong> {{ XAxis }}</p>
+        <p><strong>YAxis:</strong> {{ YAxis }}</p>
+        <p><strong>Rows:</strong> {{ rows?.length }} items</p>
+        <p><strong>Headers:</strong> {{ getHeaders() | json }}</p>
+        <div *ngIf="error"><strong>Error:</strong> {{ error }}</div>
+      </div>
+      
+      <div *ngIf="error" class="error_mess">
+        {{ error }}
+      </div>
+      
+      <table class="table" *ngIf="rows && rows.length > 0; else noData">
         <thead>
           <tr>
             <th *ngFor="let co of getHeaders();let i=index">{{co}}</th>
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let item of rows?.slice()?.reverse()">
+          <tr *ngFor="let item of rows">
             <td *ngFor="let key of getHeaders()">{{item[key]}}</td>
           </tr>
         </tbody>
       </table>
+      
+      <ng-template #noData>
+        <p *ngIf="!error">No data available</p>
+      </ng-template>
       </div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts
index 9e1f6ac..c71474d 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-grid-runner',
@@ -26,86 +30,191 @@ export class GridRunnerComponent implements OnInit {
   public DashtestboardArray: DashboardContentModel[] = [];
   workflowLine;
   TableName;
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
 
   constructor(
-    private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router
+    private Dashtestservive:DashrunnerService,
+    private route: ActivatedRoute,
+    private dashboardService: Dashboard3Service,
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService
   ) { }
 
   ngOnInit(): void {
 
     this.editId = this.route.snapshot.params.id;
-    console.log(this.editId);
+    console.log('GridRunner: Component initialized with editId:', this.editId);
     // this.getbyId();
 
-    this.dashboardService.getById(this.editId).subscribe((data)=>{
-      console.log(data);
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        console.log('GridRunner: Filter state changed:', filters);
+        // When filters change, refresh the grid data
+        this.fetchGridData();
+      })
+    );
+
+    this.dashboardService.getById(this.editId).subscribe((data) => {
+      console.log('GridRunner: Received dashboard data:', data);
       this.workflowLine = data.dashbord1_Line[0].model;
-      const dash = JSON.parse(this.workflowLine) ;
+      const dash = JSON.parse(this.workflowLine);
       // this.DashtestboardArray = dash.dashboard;
       // console.log(this.DashtestboardArray);
 
       const ChartObject = dash.dashboard.filter(obj => obj.name === "Grid View");
-      console.log(ChartObject);
+      console.log('GridRunner: ChartObject for Grid View:', ChartObject);
       for (let i = 0; i < ChartObject.length; i++) {
         const ids = this.Dashtestservive.getgridview();
+        console.log('GridRunner: Current gridview ids:', ids);
+        console.log('GridRunner: Checking chartid:', ChartObject[i].chartid);
         // console.log(ids);
         if (ids.includes(ChartObject[i].chartid)) {
           // If the chartid is already in the ids array, continue to the next iteration
+          console.log('GridRunner: Skipping chartid as it already exists:', ChartObject[i].chartid);
           continue;
         }
+        console.log('GridRunner: Adding new chartid:', ChartObject[i].chartid);
         this.Dashtestservive.setgridview(ChartObject[i].chartid);
-        const id = ids[i];
-        console.log(id);
-      
-        if (ChartObject[i].chartid === id) {
-          this.TableName = ChartObject[i].table;
-          this.XAxis = ChartObject[i].xAxis;
-          this.YAxis = ChartObject[i].yAxis;
-          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Grid View",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.rows = Ldata;
-            this.rowdata = this.rows
-            
-           },(error) => {
-            console.log(error);
-           });
-          break; // No need to continue the loop once the correct placeholder is found
-        }
+
+        this.TableName = ChartObject[i].table;
+        this.XAxis = ChartObject[i].xAxis;
+        this.YAxis = ChartObject[i].yAxis;
+        // Add connection ID if available
+        this.ConnectionId = ChartObject[i].connection;
+        console.log('GridRunner: TableName:', this.TableName);
+        console.log('GridRunner: XAxis:', this.XAxis);
+        console.log('GridRunner: YAxis:', this.YAxis);
+        console.log('GridRunner: ConnectionId:', this.ConnectionId);
+        // Fetch data with filters
+        this.fetchGridData();
+        break; // No need to continue the loop once the correct placeholder is found
       }
+    }, (error) => {
+      console.log('GridRunner: Error fetching dashboard data:', error);
     });
   }
 
+  // Fetch grid data with filter support
+  fetchGridData(): void {
+    console.log('fetching grid data ...')
+    if (this.TableName) {
+      console.log('GridRunner: Fetching data for TableName:', this.TableName, 'XAxis:', this.XAxis, 'YAxis:', this.YAxis);
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
 
-  
-//dynamic table
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
 
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
 
-getTableData(id){
-}
-getHeaders() {
-let headers: string[] = [];
-if(this.rows) {
-  this.rows.forEach((value) => {
-    Object.keys(value).forEach((key) => {
-      if(!headers.find((header) => header == key)){
-        headers.push(key)
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
       }
 
-    })
+      console.log('GridRunner: Final filter object to send to API:', filterObj);
 
-  })
-}
-return headers;
-}
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "grid", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log('GridRunner: Received data from API:', Ldata);
 
-generatePDFFile(){
-  this.buttonClicked.emit();
-  const content = this.contentContainerRef.nativeElement;
-  const filename = 'gridview.pdf'; // You can provide any desired filename here
+        // Handle the actual data structure returned by the API
+        if (Ldata && Ldata.chartData) {
+          this.rows = Ldata.chartData;
+          this.rowdata = this.rows;
+        } else if (Ldata && Ldata.data) {
+          // Handle the original expected format as fallback
+          this.rows = Ldata.data;
+          this.rowdata = this.rows;
+        } else if (Array.isArray(Ldata)) {
+          // Handle case where data is directly an array
+          this.rows = Ldata;
+          this.rowdata = this.rows;
+        } else {
+          console.warn('GridRunner: Received data does not have expected structure', Ldata);
+          this.rows = [];
+          this.rowdata = [];
+        }
 
-  this.Dashtestservive.generatePDF(content, filename);
-}
-}
+        // Log the structure of the received data
+        if (this.rows) {
+          console.log('GridRunner: Rows length:', this.rows.length);
+          if (this.rows.length > 0) {
+            console.log('GridRunner: First row structure:', this.rows[0]);
+          }
+        } else {
+          console.log('GridRunner: No data received');
+        }
+      }, (error) => {
+        console.log('GridRunner: Error fetching data:', error);
+        this.error = error;
+      });
+    } else {
+      console.log('GridRunner: Missing TableName or XAxis');
+    }
+  }
 
+
+  //dynamic table
+
+
+  getTableData(id) {
+  }
+  getHeaders() {
+    let headers: string[] = [];
+    if (this.rows) {
+      console.log('GridRunner: Getting headers from rows:', this.rows);
+      this.rows.forEach((value) => {
+        Object.keys(value).forEach((key) => {
+          if (!headers.find((header) => header == key)) {
+            headers.push(key)
+          }
+        })
+      })
+    }
+    console.log('GridRunner: Computed headers:', headers);
+    return headers;
+  }
+
+  generatePDFFile() {
+    this.buttonClicked.emit();
+    const content = this.contentContainerRef.nativeElement;
+    const filename = 'gridview.pdf'; // You can provide any desired filename here
+
+    this.Dashtestservive.generatePDF(content, filename);
+  }
+
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('GridRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+
+    console.log('GridRunnerComponent destroyed and cleaned up');
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts
index 93d621b..bb0da3e 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts
@@ -7,6 +7,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { jsPDF } from 'jspdf';
 import domtoimage from 'dom-to-image';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-line-runner',
   templateUrl: './line-runner.component.html',
@@ -54,8 +58,13 @@ export class LineRunnerComponent implements OnInit {
    lineChartLegend = false;
   lineChartPlugins = [];
   lineChartType = 'line';
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   ngOnInit(): void {
 
@@ -65,6 +74,13 @@ export class LineRunnerComponent implements OnInit {
       this.editId = this.route.snapshot.params.id;
       console.log(this.editId);
 
+      // Subscribe to filter changes
+      this.subscriptions.push(
+        this.filterService.filterState$.subscribe(filters => {
+          // When filters change, refresh the chart data
+          this.fetchChartData();
+        })
+      );
 
       this.dashboardService.getById(this.editId).subscribe((data)=>{
         console.log(data);
@@ -93,15 +109,8 @@ export class LineRunnerComponent implements OnInit {
             this.showlabel = ChartObject[i].showlabel;
             this.lineChartLegend = ChartObject[i].chartlegend;
             console.log(this.TableName);
-            this.Dashtestservive.getChartData(this.TableName,"Line Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-              console.log(Ldata);
-              this.JsonData = Ldata;
-              this.lineChartData = this.JsonData.chartData;
-              this.lineChartLabels = this.JsonData.chartLabels;
-              
-             },(error) => {
-              console.log(error);
-             });
+            // Fetch data with filters
+            this.fetchChartData();
             break; // No need to continue the loop once the correct placeholder is found
           }
         }
@@ -128,6 +137,52 @@ export class LineRunnerComponent implements OnInit {
   //     }
   }
   
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('LineRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.lineChartData = this.JsonData.chartData;
+        this.lineChartLabels = this.JsonData.chartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -165,5 +220,18 @@ export class LineRunnerComponent implements OnInit {
   //     console.error('Error generating PDF:', error);
   //   }
   // }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('LineRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('LineRunnerComponent destroyed and cleaned up');
+  }
 
 }
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts
index c1a64d1..a224b25 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 
 @Component({
@@ -24,8 +28,13 @@ export class PieRunnerComponent implements OnInit {
   JsonData;
   lineChartNoLabels: any[] = [];
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   public pieChartLabels: string[] = ['SciFi', 'Drama', 'Comedy'];
   public pieChartData: number[] = [30, 50, 20];
@@ -39,6 +48,13 @@ export class PieRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
 
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
@@ -67,21 +83,60 @@ export class PieRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Pie Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.pieChartData = this.JsonData.pieChartData;
-            this.pieChartLabels = this.JsonData.pieChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('PieRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.pieChartData = this.JsonData.pieChartData;
+        this.pieChartLabels = this.JsonData.pieChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -89,4 +144,17 @@ export class PieRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('PieRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('PieRunnerComponent destroyed and cleaned up');
+  }
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts
index fdbe17a..b2d7dcb 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts
@@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-polar-runner',
@@ -24,8 +28,13 @@ export class PolarRunnerComponent implements OnInit {
   JsonData;
   lineChartNoLabels: any[] = [];
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ];
   public polarAreaChartData: any = [
@@ -41,6 +50,13 @@ export class PolarRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
 
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
@@ -67,21 +83,60 @@ export class PolarRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"PolarArea Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.polarAreaChartData = this.JsonData.polarAreaChartData;
-            this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('PolarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.polarAreaChartData = this.JsonData.polarAreaChartData;
+        this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -89,5 +144,18 @@ export class PolarRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('PolarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('PolarRunnerComponent destroyed and cleaned up');
+  }
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts
index e1a901e..a0e6083 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts
@@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-radar-runner',
@@ -25,8 +29,13 @@ export class RadarRunnerComponent implements OnInit {
   lineChartNoLabels: any[] = [];
   ChartLegend = false;
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   public radarChartLabels: string[] = [
     "Eating",
@@ -50,6 +59,13 @@ export class RadarRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
 
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
@@ -76,21 +92,60 @@ export class RadarRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Radar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.radarChartData = this.JsonData.radarChartData;
-            this.radarChartLabels = this.JsonData.radarChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('RadarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.radarChartData = this.JsonData.radarChartData;
+        this.radarChartLabels = this.JsonData.radarChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -98,5 +153,18 @@ export class RadarRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('RadarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('RadarRunnerComponent destroyed and cleaned up');
+  }
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts
index 2f36596..a456469 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts
@@ -5,6 +5,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
 import { ChartDataset } from 'chart.js';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-scatter-runner',
@@ -26,8 +30,13 @@ export class ScatterRunnerComponent implements OnInit {
   lineChartNoLabels: any[] = [];
   ChartLegend = false;
   
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
   constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
   public scatterChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ];
 
@@ -69,6 +78,13 @@ export class ScatterRunnerComponent implements OnInit {
     this.editId = this.route.snapshot.params.id;
     console.log(this.editId);
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
 
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
@@ -95,21 +111,60 @@ export class ScatterRunnerComponent implements OnInit {
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Scatter Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.scatterChartData = this.JsonData.scatterChartData;
-            this.scatterChartLabels = this.JsonData.scatterChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
     });
   }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('ScatterRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.scatterChartData = this.JsonData.scatterChartData;
+        this.scatterChartLabels = this.JsonData.scatterChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
   generatePDFFile(){
     this.buttonClicked.emit();
     const content = this.contentContainerRef.nativeElement;
@@ -117,5 +172,18 @@ export class ScatterRunnerComponent implements OnInit {
 
     this.Dashtestservive.generatePDF(content, filename);
   }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('ScatterRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('ScatterRunnerComponent destroyed and cleaned up');
+  }
 
 }
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts
index cb264cb..a1cdf88 100644
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-todo-runner',
@@ -12,8 +16,13 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 export class TodoRunnerComponent implements OnInit {
   @ViewChild('contentContainer') contentContainerRef!: ElementRef;
   @Output() buttonClicked = new EventEmitter<void>();
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
   constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
 
     loading = false;
     givendata;
@@ -39,6 +48,14 @@ export class TodoRunnerComponent implements OnInit {
     console.log(this.editId);
     // this.getbyId();
 
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the todo data
+        this.fetchTodoData();
+      })
+    );
+
     this.dashboardService.getById(this.editId).subscribe((data)=>{
       console.log(data);
       this.workflowLine = data.dashbord1_Line[0].model;
@@ -64,14 +81,8 @@ export class TodoRunnerComponent implements OnInit {
           this.XAxis = ChartObject[i].xAxis;
           this.YAxis = ChartObject[i].yAxis;
           console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Todo List",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.todoList.listName = Ldata.listName;
-            this.todoList.List = Ldata.List;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchTodoData();
           break; // No need to continue the loop once the correct placeholder is found
         }
       }
@@ -100,4 +111,58 @@ generatePDFFile(){
 
   this.Dashtestservive.generatePDF(content, filename);
 }
+
+// Fetch todo data with filter support
+fetchTodoData(): void {
+  if (this.TableName && this.XAxis && this.YAxis) {
+    // Get filter parameters from common filters
+    const commonFilters = this.filterService.getFilterValues();
+    
+    // Build filter object using field names as keys
+    const filterObj = {};
+    Object.keys(commonFilters).forEach(filterId => {
+      const filterValue = commonFilters[filterId];
+      
+      // Find the filter definition to get the field name
+      const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+      
+      if (filterDef && filterDef.field) {
+        const fieldName = filterDef.field;
+        if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+          filterObj[fieldName] = filterValue;
+        }
+      }
+    });
+    
+    // Convert to JSON string for API call
+    let filterParams = '';
+    if (Object.keys(filterObj).length > 0) {
+      filterParams = JSON.stringify(filterObj);
+    }
+    
+    console.log('TodoRunner: Final filter object to send to API:', filterObj);
+    
+    // Fetch data from the dashboard service with filters
+    this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, undefined, '', '', filterParams).subscribe((Ldata) => {
+      console.log(Ldata);
+      this.todoList.listName = Ldata.listName;
+      this.todoList.List = Ldata.List;
+    },(error) => {
+      console.log(error);
+    });
+  }
 }
+
+ngOnDestroy() {
+  // Unsubscribe from all subscriptions to prevent memory leaks
+  console.log('TodoRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+  this.subscriptions.forEach(subscription => {
+    if (subscription && !subscription.closed) {
+      subscription.unsubscribe();
+    }
+  });
+  this.subscriptions = [];
+  
+  console.log('TodoRunnerComponent destroyed and cleaned up');
+}
+}
\ No newline at end of file