Dynamic charts

Topic: Dynamic charts

umut AKGUL free asked 5 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 5 years ago

0 0 Best answer

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>
<pre class="code-toolbar grey lighten-2 p-3 mb-3"><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></pre>
</div>
.ts:
<div>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">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;

}

}</pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

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

umut AKGUL

7Support score
1Questions 0Answers 0Snippets