CODEWITHSUNDEEP
angulartypescriptchart.jsng2-charts
Joey
Joey

Reputation: 27

ng2Charts/chart.js changing chart type for one is impacting many charts

I have a dashboard with multiple charts. Above each chart i have a select option for the chart type (bar, pie or line). Now...in my code it changes all of the charts on the site when you chose a type but i only want to change the chart where the user selected the type.

Here is a Stackblitz of my issue: https://stackblitz.com/edit/angular-yvy8mf

Could you guys please help me?

  shapes = [
    { id: "bar", display: "bar chart" },
    { id: "pie", display: "pie chart" },
    { id: "line", display: "line chart" },
  ];

onChange(event) {

    this.selectedType = event.target.value;
   
  }  
  <div id="content" class="form__card" *ngFor="let a of model[0]?.category; let ix = index">
   
      <ng-container *ngFor="let b of a.question; let iy = index">
       
                  <select *ngIf="categoryQuestion.questionType != 'text'" class="form-control input-sm " (change)="onChange($event)">
                    <option disabled selected>Wähle einen Chart Typ </option>
                    <option *ngFor="let t of shapes" [value]=t.id>{{t.display}}</option>
                  </select>

           

                <div *ngIf="selectedType === 'bar'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"                [options]="barChartOptions"
                    [legend]="barChartLegend" [options]="chartOption" [chartType]="'bar'"></canvas>

                </div>

                <div *ngIf="selectedType === 'pie'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"          [options]="pieChartOptions"
                    [chartType]="'pie'" (chartHover)="chartHovered($event)"></canvas>

                </div>

                <div *ngIf="selectedType === 'line'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)" [options]="lineChartOptions"
                    [chartType]="'line'" (chartHover)="chartHovered($event)" [legend]="lineChartLegend"></canvas>

                </div>   
    </ng-container>
  </div>

Upvotes: 1

Views: 969

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

To see working code here

The issue was because the selected value was stored at the level of category... however the choices were being made at the level of the question... this is why the first and third chart data was reading the same 'type' and second and fourth charts were reading the same 'type'

According to the hierarchy of data:

  • category > question > unique-chart
  • category (previously selected value was stored here) > question > unique-chart
  • category > question (now selected value is stored here) > unique-chart

see this selectedType field added here, at the individual question level

onChange function

onChange(event, ix, iy) {
    console.log("for:" + ix + " & " + iy + ", selected type" + event.target.value);
    this.selectedType[iy] = event.target.value;
    this.evaluationModel[0].category[ix].question[iy].selectedType = event.target.value;
  }

Upvotes: 2

Related Questions