0

I am using line chart to display the values of time in x-axis and speed of vehicle in y-axis and these both values needs to be come from api. As of now i am using static values like,

playback.component.ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'app-play-back',
  templateUrl: './play-back.component.html'
})
export class PlayBackComponent {
  // lineChart
  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55], label: 'travelled details'}
  ];
  public lineChartLabels:Array<any> = ['12:00 AM', '4:00 AM', '8:00 AM', '12:00 PM', '4:00 PM', '8:00 PM'];
  public lineChartOptions:any = {
    responsive: true
  };
  public lineChartLegend:boolean = true;
  public lineChartType:string = 'line'; 
}

Instead of this static values in data and label, i have to pass the dynamic values from api which is in the form of objects. Those values are stored in chart details as in the image,

enter image description here

I am passing integer as data values now in static but actually i need to pass the object from api inside the data, from the chart details object fixTime values in x-axis and speed value in y-axis. Kindly help me to solve this.

Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116

1 Answers1

0

Using the formatAMPM as a helper, you can make something like:

data = objects.map(item => { return item.speed; })
labels = objects.map(item => { return formatAMPM(item.fixTime); })
Rodris
  • 2,603
  • 1
  • 17
  • 25