Dynamic charts

umut AKGUL asked 6 years ago

Hello, I'd like to use your libraries to implement charts in my website. But I am wondering about the usage. Is it possible to display data dynamically ? Like in google Analytics where you can change the displayed period "Last week, last month...." Is it possible with mdbootstrap ? Or it's only by giving a table of array, containing the static period legend ? Thanks in advance,

Damian Gemza staff answered 6 years ago

Dear umut AKGUL, I don't know if I understood you right, but you can achieve your desired behavior by updating the variable which holds the actual data of chart. Please check my below code: .html:
<div style="display: block">

<canvas mdbChart [chartType]="chartType" [datasets]="datasets" [labels]="chartLabels" [colors]="chartColors"

[options]="chartOptions" [legend]="true" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">

</canvas>

</div>

<button (click)="switchChartData()"mdbBtncolor="primary">Change</button>
.ts:
import { Component } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent {

public chartType:string='line';

public datasets:Array<any> = [];

public chartDataArray:Array<any> = [

{

type:'Week', data: [

{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Week Data 1' },

{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Week Data 2' }

]

},

{

type:'Month', data: [

{ data: [120, 123, 145, 172, 300, 158, 122], label: 'Month Data 1' },

{ data: [148, 202, 111, 199, 400, 122, 158], label: 'Month Data 1' }

]

}

];

public chartLabels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

public chartColors:Array<any> = [

{

backgroundColor:'rgba(220,220,220,0.2)',

borderColor:'rgba(220,220,220,1)',

borderWidth:2,

pointBackgroundColor:'rgba(220,220,220,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(220,220,220,1)'

},

{

backgroundColor:'rgba(151,187,205,0.2)',

borderColor:'rgba(151,187,205,1)',

borderWidth:2,

pointBackgroundColor:'rgba(151,187,205,1)',

pointBorderColor:'#fff',

pointHoverBackgroundColor:'#fff',

pointHoverBorderColor:'rgba(151,187,205,1)'

}

];

public chartOptions:any= {

responsive:true

};

public chartClicked(e:any):void { }

public chartHovered(e:any):void { }

constructor() {

this.datasets=this.chartDataArray[0].data;

}

switchChartData() {

this.datasets=this.chartDataArray[1].data;

}

}
Best Regards, Damian
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Computer
  • Browser: Chrome
  • OS: Win 7
  • Provided sample code: No
  • Provided link: No