Topic: Angular Admin Template
Hi Damian, I tried the solution. However, it doesn't change the view every few seconds. Sure I tested it with console output and generate each time random data. Maybe you can help me .:)
Start your code here
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard6',
templateUrl: './dashboard6.component.html',
styleUrls: ['./dashboard6.component.scss']
})
export class Dashboard6Component implements OnInit {
public chart1Type:string = 'line';
public chart2Type:string = 'line';
public chart3Type:string = 'line';
// tslint:disable-next-line:max-line-length
// Note that below data are duplicated, it shouldn't be used that way. Purpose of following is keep data clearly binded to each chart separetaly.
getDataFromAjax(){
console.log('Hallo Welt');
var r = Array.from({length: 7}, () => Math.floor(Math.random() * 9));
return r
}
public chart1Datasets:Array<any> = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset'}
];
public chart2Datasets:Array<any> = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset'}
];
public chart3Datasets:Array<any> = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset'}
];
public chart1Labels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chart2Labels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chart3Labels:Array<any> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
public chart1Colors: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 chart2Colors: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 chart3Colors: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 chart1Options:any = {
responsive: true
};
constructor() {
//setInterval(() => this.getDataFromAjax(), 2000);
}
ngOnChanges (){
// setInterval(() => this.getDataFromAjax(), 2000);
}
ngOnInit(){
}
ngAfterViewInit() {
setTimeout(() => {
this.chart1Datasets= [
{ data: Array.from({length: 7}, () => Math.floor(Math.random() * 9)), label: 'Second' },
//{ data: [], label: '' },
];
}, 1000);
setTimeout(() => {
this.chart2Datasets= [
{ data: this.getDataFromAjax(), label: 'Second' },
{ data: [], label: '' },
];
}, 1000);
}
}
change() {
let r1:any=this.chart1Datasets[0].data[0] =Math.floor(Math.random() *10);
let r2:any=this.chart1Datasets[0].data[1] =Math.floor(Math.random() *10);
let r3:any=this.chart1Datasets[0].data[2] =Math.floor(Math.random() *10);
let r4:any=this.chart1Datasets[0].data[3] =Math.floor(Math.random() *10);
let r5:any=this.chart1Datasets[0].data[4] =Math.floor(Math.random() *10);
let r6:any=this.chart1Datasets[0].data[5] =Math.floor(Math.random() *10);
let r7:any=this.chart1Datasets[0].data[6] =Math.floor(Math.random() *10);
this.chart1Datasets= [{data: [r1, r2, r3, r4, r5, r6, r7], label:'Label number: '}];
}
ngAfterViewInit() {
setInterval(() => {
this.change();
}, 3000);
Β
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 years ago
Dear atstaeff, Here you go: https://mdbootstrap.com/support/angular-line-graph-updating-data/ Best Regards, Damian