I'm trying to call a function that draws a diagram (the data in the diagram is from an API call) from another component to the main HTML. There was a similar question asked here but It didn't help me.
import { Component } from "@angular/core";
import { RestService } from '../rest.service';
import { Chart,registerables } from 'chart.js';
@Component({
selector: 'app',
templateUrl: './humidity.html'
})
export class Humidity
{
result:any;
stamp: any;
name:any;
measure:any;
constructor(private http: RestService)
{
Chart.register(...registerables);
}
ngOnInit()
{
this.http.getMeasurments().then((data)=>{
this.result=data;
console.log(this.result);
this.name = this.result.series[0].name;
this.measure = this.result.series[0].data;
this.stamp = this.result.labels;
this.drawChart123();
});
}
drawChart123()
{
new Chart ('canvas', {
type: 'line',
data: {
labels: this.stamp,
datasets: [{
label: this.name,
data: this.measure,
pointStyle: 'crossRot',
backgroundColor: [
'DeepSkyBlue',
],
borderColor: [
'DeepSkyBlue'
],
borderWidth: 3
}]
},
options:
{
elements:
{
point:
{
borderWidth: 0,
radius: 3,
backgroundColor: 'rgba(0,0,0,0)'
}
},
}
})
}
}
The code above is from the Humidity component that draws the diagram. The Humidity component has a template HTML that contains only 1 div with canvas inside it. Another problem here is that when i try to console.log the result from the API I'm not getting the data from the API.
getMeasurments()
{
let url = '...';
return this.http.get(url).toPromise().then((data)=\>{
return data
});
}
The code above Is what I use to get the data from the API.
import { Component} from '@angular/core';
import { RestService } from './rest.service';
import { Chart,registerables } from 'chart.js';
import { NgIf } from '@angular/common';
**import { Humidity } from './test/humidity';**
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: \['./app.component.css'\],
\*\* providers: \[Humidity\]\*\*
})
export class AppComponent
{
constructor(**private comp: Humidity**,private http: RestService)
{
Chart.register(...registerables);
}
**public test() {
this.comp.drawChart123();
}**
The code above is a small part of my main component.
<div class="name" (click)="test()">
Humidity
<div class="value">
<ng-container *ngIf="moisture; else noValue">
{{this.moisture}}%
</ng-container>
</div>
</div>
The code above Is where I tried calling the function in the HTML.
I made a function that draws the chart for "Humidity" but there are more measurments and If I make another function that draws a diagram an error in the console pops up saying that I have to delete the canvas to use it again. Therefore i'm trying to split each measurment and each should have their own canvas (if that's possible).
The text in bold i saw and tried from here.
I also tried watching tutorials on youtube or in websites but they didn't really helped.
My goal is when "Humidity" is clicked a diagram should be drawn and the contents of the diagram should be from the API call.
I am new to Angular so any tips and advices will be welcomed.
