Ionic - create multiple charts with dynamic data

@piraba wrote:

Have to display no of charts dynamically. Show the house’s utilities consumption in bar chart. if Logged user has more than house , then show number of houses consumption graphs.

Now I have problems, how to dynamically show the graphs.

This is my code.

ts file

@IonicPage()
@Component({
selector: 'page-consumption',
templateUrl: 'Consumption.html',
providers: [ConsumptionController]
})
export class ConsumptionPage {
  isServiceLoaded : boolean =  false;
  barChart: any;
  secondbarChart: any;

  msslList : any[];
  msslNum: number;

  barChartLabels : any[];
  barChartLabel: string[];
  barChartType: string = 'bar';
  barChartLegend: boolean = true;
  barChartData: any[];
  consumptionList: Array<Consumption>
  barChartOptions = {
  scaleShowVerticalLines: false,
  responsive: true
 };

 constructor(public navCtrl: NavController,
          public navParams: NavParams,
          private _progressLoader: ProgressLoader,
          private _consController: ConsumptionController,
          private connectivityService: ConnectivityService) {

 }


getConsumptionData() {
 this._consController.consumptionService("1").then((result) => {
        for (let i = 0; i < msslConsumptionList.length; i++) {
        const consObj                     = msslConsumptionList[i];
           usagesList[usagesList.length]     = consObj.usage;
           usageMonthList[usagesList.length] = consObj.startDate;

        }

    this.barChartLabels = usageMonthList;
      this.barChartData   = [{ data: usagesList, label: 'Series A' } ];

});
  this.isServiceLoaded = true;

  }
}

This is my HTML

<ion-content *ngIf="isServiceLoaded">
<br>
<ion-card>
    {{ msslList }} {{ msslNum }} -->

    <div *ngFor="let mssl of msslList; let i=index">
        Testing

        <ion-card-header class="center">
            150 Tanjong Pagar Road, S088456
        </ion-card-header>

        <ion-card-content>
            <canvas baseChart [datasets]=" barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
        </canvas>

        </ion-card-content>


    </div>
</ion-card>

Here My question is

1> How to show no of graphs dynamically?

2> My obstacle is- dynamically declare variables and assign that variable to to html canvas id

eg. barChartLabels1 , barChartLabels2 etc barChartData, barChartData2 etc

I tried like below stated code, but in ts how to declare local variable dynamically?

Please guide me. This is the 2nd whole day i spent for this but unfortunately i couldn’t achieve my target.

Posts: 1

Participants: 1

Read full topic