I want to bind the values from api in apexchart area chart
app.comp.ts
salesforpurchase : result[]
this.service.sales().subscribe (data=> {
this.salesforpurchase=data.data
In result[] , values will be
date:2012-03-02, sales:256
and so on...
intializationChartoption():void {
this.title ={
text: 'linechart'
};
this.series = [{
name: 'Purchase',
data: [20,10,300] //static data . Here i want to bring sales value from result[]
}]
this.chart ={
type: 'area',
width :650,
};
}
html
<apx-chart [series]="series" [chart]="chart" [title]="title"
></apx-chart>
Please help me how to bind the data dynamically to apex chart
You would just have to update the series values and reasign it, so apex chart would detect changes on the series and try to update the chart.
I did a quick example on stackblitz randomizing the first value eveyr few seconds. In your case, everytime you get a value from your api, you prepare you data accordinly and the reasign the series afterwards.
https://stackblitz.com/edit/angular-ivy-xkbqdb?file=src/app/app.component.ts
First thing to notice is to initialize the value within the subscription callback. In other words, you'd need to subscribe to the observable where it's response is required.
Second, to get only the sales property of each object of the array as it's own array, you could use the Array#map function.
Try the following
ngOnInit() {
this.service.sales().subscribe(
(data: any) => {
this.intializationChartoption( // <-- this call *must* be inside the subscription callback
data.map((item: any) => item.sales)
);
},
error => {
// handle errors
}
);
}
intializationChartoption(series: number[]): void {
this.title ={
text: 'linechart'
};
this.series = [{
name: 'Purchase',
data: series
}];
this.chart = {
type: 'area',
width :650,
};
}
}