Angular Admin Template

Topic: Angular Admin Template

atstaeff pro asked 6 years ago

Hi guys,I use the angular admin template. How can I rerender or update my linechart?Thank you 🙂

Damian Gemza staff commented 6 years ago

Dear atstaeff, Here you go: https://mdbootstrap.com/support/angular-line-graph-updating-data/ Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

This code should do what you expect - change your dataset in every 5 seconds:

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);

 

}

Add comment

atstaeff pro answered 6 years ago

0 0 Best answer

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 .:)
<pre>Start your code here

</pre>
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);
}
}

Please insert min. 20 characters.

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);

}

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: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

atstaeff

Pro User 10Support score
2Questions 1Answers 0Snippets