Topic: Dynamic charts
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,
Add comment
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:
.ts:
Best Regards,
Damian
<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>
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;
}
}
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
Related topics