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 19ae8fb..741b457 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
@@ -28,6 +28,7 @@ export class BarRunnerComponent implements OnInit {
   JsonData;
 
   barData;
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -95,6 +96,7 @@ export class BarRunnerComponent implements OnInit {
             this.YAxis = ChartObject[i].yAxis;
             this.showlabel = ChartObject[i].showlabel;
             this.barChartLegend = ChartObject[i].chartlegend;
+            this.ConnectionId = ChartObject[i].connection; // Add connection ID
             console.log(this.TableName);
             // Fetch data with filters
             this.fetchChartData();
@@ -139,7 +141,7 @@ export class BarRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.barChartData = this.JsonData.barChartData;
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 1ff9551..f8d2cd0 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
@@ -29,6 +29,7 @@ export class BubbleRunnerComponent implements OnInit {
   JsonData;
   lineChartNoLabels: [] = [];
   ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -128,6 +129,7 @@ export class BubbleRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -172,7 +174,7 @@ export class BubbleRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.bubbleChartData = this.JsonData.bubbleChartData;
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
new file mode 100644
index 0000000..46fff9f
--- /dev/null
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
@@ -0,0 +1,64 @@
+<!-- Display Mode - No configuration UI in runner -->
+<div class="compact-filter">
+  <div class="filter-header">
+    <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
+    <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
+    <span class="filter-type">({{ filterType }})</span>
+  </div>
+  
+  <!-- Text Filter -->
+  <div class="filter-control" *ngIf="filterType === 'text'">
+    <input type="text" 
+           [(ngModel)]="filterValue" 
+           (ngModelChange)="onFilterValueChange($event)"
+           [placeholder]="filterLabel || filterKey"
+           class="clr-input compact-input">
+  </div>
+
+  <!-- Dropdown Filter -->
+  <div class="filter-control" *ngIf="filterType === 'dropdown'">
+    <select [(ngModel)]="filterValue" 
+            (ngModelChange)="onFilterValueChange($event)"
+            class="clr-select compact-select">
+      <option value="">{{ filterLabel || filterKey }}</option>
+      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+    </select>
+  </div>
+
+  <!-- Multi-Select Filter -->
+  <div class="filter-control" *ngIf="filterType === 'multiselect'">
+    <div class="checkbox-group">
+      <div *ngFor="let option of filterOptions" class="checkbox-item">
+        <input type="checkbox" 
+               [checked]="filterValue && filterValue.includes(option)"
+               (change)="onMultiSelectChange(option, $event)"
+               [id]="'checkbox-' + option">
+        <label [for]="'checkbox-' + option">{{ option }}</label>
+      </div>
+    </div>
+  </div>
+
+  <!-- Date Range Filter -->
+  <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
+    <input type="date" 
+           [(ngModel)]="filterValue.start" 
+           (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
+           placeholder="Start Date"
+           class="clr-input compact-date">
+    <input type="date" 
+           [(ngModel)]="filterValue.end" 
+           (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
+           placeholder="End Date"
+           class="clr-input compact-date">
+  </div>
+
+  <!-- Toggle Filter -->
+  <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
+    <input type="checkbox" 
+           [(ngModel)]="filterValue" 
+           (ngModelChange)="onToggleChange($event)"
+           clrToggle 
+           class="clr-toggle">
+    <label class="toggle-label">{{ filterLabel || filterKey }}</label>
+  </div>
+</div>
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
new file mode 100644
index 0000000..7dbe526
--- /dev/null
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
@@ -0,0 +1,74 @@
+.compact-filter {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  background-color: #f8f8f8;
+  
+  .filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    
+    .filter-label, .filter-key {
+      font-weight: bold;
+    }
+    
+    .filter-type {
+      font-size: 0.8em;
+      color: #666;
+    }
+  }
+  
+  .filter-control {
+    margin-bottom: 10px;
+    
+    .compact-input, .compact-select, .compact-date {
+      width: 100%;
+      padding: 5px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    
+    .compact-multiselect {
+      width: 100%;
+      height: 100px;
+    }
+    
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      
+      .checkbox-item {
+        margin: 5px 0;
+        
+        input[type="checkbox"] {
+          margin-right: 5px;
+        }
+      }
+    }
+    
+    &.date-range {
+      display: flex;
+      gap: 10px;
+      
+      .compact-date {
+        flex: 1;
+      }
+    }
+    
+    &.toggle {
+      display: flex;
+      align-items: center;
+      
+      .clr-toggle {
+        margin-right: 10px;
+      }
+      
+      .toggle-label {
+        margin: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
new file mode 100644
index 0000000..083854e
--- /dev/null
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
@@ -0,0 +1,173 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FilterService, Filter } from '../../../dashboardnew/common-filter/filter.service';
+
+@Component({
+  selector: 'app-compact-filter-runner',
+  templateUrl: './compact-filter-runner.component.html',
+  styleUrls: ['./compact-filter-runner.component.scss']
+})
+export class CompactFilterRunnerComponent implements OnInit {
+  @Input() filterKey: string = '';
+  @Input() filterType: string = 'text';
+  @Input() filterOptions: string[] = [];
+  @Input() filterLabel: string = '';
+  @Input() apiUrl: string = '';
+  @Input() connection: number | undefined; // Changed from connectionId to match DashboardContentModel
+  @Output() filterChange = new EventEmitter<any>();
+  
+  selectedFilter: Filter | null = null;
+  filterValue: any = '';
+  availableFilters: Filter[] = [];
+  availableKeys: string[] = [];
+  availableValues: string[] = [];
+  
+  constructor(
+    private filterService: FilterService
+  ) { }
+
+  ngOnInit(): void {
+    // Register this filter with the filter service
+    this.registerFilter();
+    
+    // Subscribe to filter definitions to get available filters
+    this.filterService.filters$.subscribe(filters => {
+      this.availableFilters = filters;
+      this.updateSelectedFilter();
+    });
+    
+    // Subscribe to filter state changes
+    this.filterService.filterState$.subscribe(state => {
+      if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
+        this.filterValue = state[this.selectedFilter.id];
+      }
+    });
+  }
+  
+  // Register this filter with the filter service
+  registerFilter(): void {
+    if (this.filterKey) {
+      // Get current filter values from the service
+      const currentFilterValues = this.filterService.getFilterValues();
+      
+      // Create a filter definition for this compact filter
+      const filterDef: Filter = {
+        id: `${this.filterKey}`,
+        field: this.filterKey,
+        label: this.filterLabel || this.filterKey,
+        type: this.filterType as any,
+        options: this.filterOptions,
+        value: this.filterValue // Use the current filter value
+      };
+      
+      // Get current filters
+      const currentFilters = this.filterService.getFilters();
+      
+      // Check if this filter is already registered
+      const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
+      
+      if (existingFilterIndex >= 0) {
+        // Preserve the existing filter configuration
+        const existingFilter = currentFilters[existingFilterIndex];
+        
+        // Preserve the existing filter value if it exists in the service
+        if (currentFilterValues.hasOwnProperty(existingFilter.id)) {
+          filterDef.value = currentFilterValues[existingFilter.id];
+          this.filterValue = filterDef.value; // Update local value
+        } else if (existingFilter.value !== undefined) {
+          // Fallback to existing filter's value if no service value
+          filterDef.value = existingFilter.value;
+          this.filterValue = filterDef.value;
+        }
+        
+        // Preserve other configuration properties
+        filterDef.label = existingFilter.label;
+        filterDef.options = existingFilter.options || this.filterOptions;
+        
+        // Update existing filter
+        currentFilters[existingFilterIndex] = filterDef;
+      } else {
+        // For new filters, check if there's already a value in the service
+        if (currentFilterValues.hasOwnProperty(filterDef.id)) {
+          filterDef.value = currentFilterValues[filterDef.id];
+          this.filterValue = filterDef.value; // Update local value
+        }
+        
+        // Add new filter
+        currentFilters.push(filterDef);
+      }
+      
+      // Update the filter service with the new filter list
+      this.filterService.setFilters(currentFilters);
+      
+      // Update the selected filter reference
+      this.selectedFilter = filterDef;
+    }
+  }
+  
+  updateSelectedFilter(): void {
+    if (this.filterKey && this.availableFilters.length > 0) {
+      this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
+      if (this.selectedFilter) {
+        // Get current value for this filter from the service
+        const currentState = this.filterService.getFilterValues();
+        const filterValue = currentState[this.selectedFilter.id];
+        if (filterValue !== undefined) {
+          this.filterValue = filterValue;
+        } else if (this.selectedFilter.value !== undefined) {
+          // Use the filter's default value if no service value
+          this.filterValue = this.selectedFilter.value;
+        } else {
+          // Use the current filter value as fallback
+          this.filterValue = this.filterValue || '';
+        }
+      }
+    }
+  }
+  
+  onFilterValueChange(value: any): void {
+    if (this.selectedFilter) {
+      this.filterValue = value;
+      this.filterService.updateFilterValue(this.selectedFilter.id, value);
+      this.filterChange.emit({ filterId: this.selectedFilter.id, value: value });
+      
+      // Update the filter definition in the service to reflect the new value
+      const currentFilters = this.filterService.getFilters();
+      const filterIndex = currentFilters.findIndex(f => f.id === this.selectedFilter.id);
+      if (filterIndex >= 0) {
+        currentFilters[filterIndex].value = value;
+        this.filterService.setFilters(currentFilters);
+      }
+    }
+  }
+  
+  onToggleChange(checked: boolean): void {
+    this.onFilterValueChange(checked);
+  }
+  
+  onDateRangeChange(dateRange: { start: string | null, end: string | null }): void {
+    this.onFilterValueChange(dateRange);
+  }
+  
+  // Handle multi-select changes
+  onMultiSelectChange(option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filterValue as array if it's not already
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!this.filterValue.includes(option)) {
+        this.filterValue.push(option);
+      }
+    } else {
+      // Remove option from array
+      this.filterValue = this.filterValue.filter((item: string) => item !== option);
+    }
+    
+    // Emit the change
+    this.onFilterValueChange(this.filterValue);
+  }
+}
\ No newline at end of file
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 39a7329..ce7d371 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
@@ -19,6 +19,8 @@ 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';
+// Add CompactFilterRunnerComponent import
+import { CompactFilterRunnerComponent } from './compact-filter-runner/compact-filter-runner.component';
 
 @Component({
   selector: 'app-dashrunnerline',
@@ -46,6 +48,7 @@ export class DashrunnerlineComponent implements OnInit {
   { name: "Radar Chart", componentInstance: RadarRunnerComponent },
   { name: "Grid View", componentInstance: GridRunnerComponent },
   { name: "To Do Chart", componentInstance: TodoRunnerComponent },
+  { name: "Compact Filter", componentInstance: CompactFilterRunnerComponent }, // Add Compact Filter Runner
 ];
 
   constructor(private Dashtestservive:DashrunnerService, private dashboardService: Dashboard3Service,private route: ActivatedRoute,
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 c47dcb6..700d621 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
@@ -37,6 +37,7 @@ export class DoughnutRunnerComponent implements OnInit {
     "chartLabels": ["Project", "Repository", "Wireframe"]
   }
   doughnutChartType: ChartType = 'doughnut';
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -87,6 +88,7 @@ export class DoughnutRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.doughnutChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -131,7 +133,7 @@ export class DoughnutRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.doughnutChartData = this.JsonData.chartData;
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 bb0da3e..c815f4b 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
@@ -58,6 +58,7 @@ export class LineRunnerComponent implements OnInit {
    lineChartLegend = false;
   lineChartPlugins = [];
   lineChartType = 'line';
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -108,6 +109,7 @@ export class LineRunnerComponent implements OnInit {
             this.YAxis = ChartObject[i].yAxis;
             this.showlabel = ChartObject[i].showlabel;
             this.lineChartLegend = ChartObject[i].chartlegend;
+            this.ConnectionId = ChartObject[i].connection; // Add connection ID
             console.log(this.TableName);
             // Fetch data with filters
             this.fetchChartData();
@@ -172,7 +174,7 @@ export class LineRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.lineChartData = this.JsonData.chartData;
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 a224b25..934f618 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
@@ -27,6 +27,7 @@ export class PieRunnerComponent implements OnInit {
   showlabel;
   JsonData;
   lineChartNoLabels: any[] = [];
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -82,6 +83,7 @@ export class PieRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -126,7 +128,7 @@ export class PieRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.pieChartData = this.JsonData.pieChartData;
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 b2d7dcb..8610693 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
@@ -27,6 +27,7 @@ export class PolarRunnerComponent implements OnInit {
   showlabel;
   JsonData;
   lineChartNoLabels: any[] = [];
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -82,6 +83,7 @@ export class PolarRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -126,7 +128,7 @@ export class PolarRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.polarAreaChartData = this.JsonData.polarAreaChartData;
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 a0e6083..748802e 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
@@ -28,6 +28,7 @@ export class RadarRunnerComponent implements OnInit {
   JsonData;
   lineChartNoLabels: any[] = [];
   ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -91,6 +92,7 @@ export class RadarRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -135,7 +137,7 @@ export class RadarRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.radarChartData = this.JsonData.radarChartData;
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 a456469..a6780d0 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
@@ -29,6 +29,7 @@ export class ScatterRunnerComponent implements OnInit {
   JsonData;
   lineChartNoLabels: any[] = [];
   ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
   
   // Add subscriptions to unsubscribe on destroy
   private subscriptions: Subscription[] = [];
@@ -110,6 +111,7 @@ export class ScatterRunnerComponent implements OnInit {
           this.YAxis = ChartObject[i].yAxis;
           this.showlabel = ChartObject[i].showlabel;
           this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchChartData();
@@ -154,7 +156,7 @@ export class ScatterRunnerComponent implements OnInit {
       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) => {
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
         console.log(Ldata);
         this.JsonData = Ldata;
         this.scatterChartData = this.JsonData.scatterChartData;
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 a1cdf88..a6ea095 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
@@ -19,21 +19,18 @@ export class TodoRunnerComponent implements OnInit {
   
   // 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) { }
 
-    loading = false;
-    givendata;
-    error;
-    XAxis;
-    YAxis;
-  
-    editId;
-    public DashtestboardArray: DashboardContentModel[] = [];
-    workflowLine;
-    TableName;
+  loading = false;
+  givendata;
+  error;
+  XAxis;
+  YAxis;
+
+  editId;
+  public DashtestboardArray: DashboardContentModel[] = [];
+  workflowLine;
+  TableName;
+  ConnectionId: number; // Add ConnectionId property
 
   list;
   data: any;
@@ -43,6 +40,12 @@ export class TodoRunnerComponent implements OnInit {
     listName: "title123",
     List:['todo 1','todo 2'],
   }
+  
+  constructor( 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);
@@ -80,6 +83,7 @@ export class TodoRunnerComponent implements OnInit {
           this.TableName = ChartObject[i].table;
           this.XAxis = ChartObject[i].xAxis;
           this.YAxis = ChartObject[i].yAxis;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
           console.log(this.TableName);
           // Fetch data with filters
           this.fetchTodoData();
@@ -143,7 +147,7 @@ fetchTodoData(): void {
     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) => {
+    this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
       console.log(Ldata);
       this.todoList.listName = Ldata.listName;
       this.todoList.List = Ldata.List;