Topic: Dynamic charts
umut AKGUL free 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,
Add comment
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:
.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
- ForumUser: 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