I am facing an issue with creating charts using PrimeNG. The main challenge I'm encountering is the conversion of data from a REST API in Angular 5 (TypeScript) and retrieving the list of measurements from the API. I have an endpoint that returns my measurements as JSON. To demonstrate, I have included a sample line chart in my application:
import { Component, OnInit } from '@angular/core';
import { JhiLanguageService } from 'ng-jhipster';
import { Message } from 'primeng/components/common/api';
@Component({
selector: 'jhi-linechart',
templateUrl: './linechart.component.html',
styles: []
})
export class LinechartComponent implements OnInit {
data: any;
msgs: Message[];
constructor() {
this.data = {
labels: ['February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: '#4bc0c0'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#565656'
}
]
};
}
ngOnInit() {
}
selectData(event) {
this.msgs = [];
this.msgs.push({severity: 'info', summary: 'Data Selected', 'detail': this.data.datasets[event.element._datasetIndex].data[event.element._index]});
}
}
This code snippet showcases a basic line chart, along with a method to fetch data from a REST endpoint. For instance:
ngOnInit() {
this.http.get('/api/measurements', {responseType: 'json'}).subscribe(data => {
console.log(data);
});
}
The JSON response from the endpoint may look like:
{
"batterStatus": 1,
"humidity: 15": 15,
"id": 1,
"measurementTime": "2017-04-06T06:00:00+02:00",
"temperatureInside" : 20,
"temepratureOutside" : 30,
"weight": 30
}
My goal is to display lines on the chart for:
- temperature inside
- temperature outside
- weight
- battery status
- humidity
per time measurement.
I have been struggling with implementing this feature correctly. Any guidance would be highly appreciated.