My previous data is displaying correctly in the chart, as shown below:
@Component({
selector: 'app-inpout-bar-chart',
templateUrl: './inpout-bar-chart.component.html',
styleUrls: ['./inpout-bar-chart.component.scss']
})
export class InpoutBarChartComponent implements OnInit {
saleData = [
{ name: 'Mozafati', value: 105000 },
{ name: 'piarom', value: 55000 },
{ name: 'rabbi', value: 15000 },
{ name: 'zahedi', value: 150000 },
{ name: 'Kalteh', value: 20000 }
];
constructor() { }
ngOnInit(): void {
}
}
Now, I want to assign new data from arrays productsName and productsValue to Saledata.
productsName = ['Mozafati', 'piarom', 'rabbi' , 'zahadi', 'Kaliteh' ];
productsValue = ['2000', '15000', '1500' , '5500', '10500' ];
productData: any[] = [
{name: this.productsName, value: this.productsValue}
];
However, this approach is not working. How can I set ProductName and productValue to Saledata?
Update:
After receiving a comment and answer, the code has been updated as follows:
export class InpoutBarChartComponent implements OnInit {
productsName = ['mozafati', 'piarom', 'rabbi' , 'zahedi', 'kaliteh' ];
productsValue = ['2000', '15000', '1500' , '5500', '10500' ];
saleData: any[];
setData(){
for (const i in this.productsName) {
this.saleData.push({
name: this.productsName[i],
value: this.productsValue[i]
});
}
}
constructor() { }
ngOnInit(): void {
this.setData();
console.log(this.saleData);
}
}
The HTML component now includes:
<ngx-charts-bar-vertical
[view]="[1000,400]"
[results]="saleData"
[xAxisLabel]="'product'"
[legendTitle]= "'number'"
[yAxisLabel]= "'value of product'"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxis]="true"
[yAxis]="true"
[gradient]="true">
</ngx-charts-bar-vertical>
Upon adding console.log, an error message was displayed:
Cannot read property 'push' of undefined