createHrzBarChart() {
let ctx = this.barChart.nativeElement;
ctx.height = 230;
this.service.insight(this.vendor_id).subscribe(res=>{
console.log(res)
for(let i = 0; i < res[‘data’].length; i++){
this.bars = new Chart(this.barChart.nativeElement, {
type: ‘bar’,
data: {
labels: [res['data'][0].date,res['data'][1].date,res['data'][2].date,res['data'][3].date,res['data'][4].date,res['data'][5].date,res['data'][6].date],
datasets: [{
data: [res['data'][0].orders,res['data'][1].orders,res['data'][2].orders,res['data'][3].orders,res['data'][4].orders,res['data'][5].orders,res['data'][6].orders],
backgroundColor: '#CCCCCC', // array should have same number of elements as number of dataset
},
{
data: [res['data'][0].amount,res['data'][1].amount,res['data'][2].amount,res['data'][3].amount,res['data'][4].amount,res['data'][5].amount,res['data'][6].amount],
backgroundColor: '#FFD700', // array should have same number of elements as number of dataset
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawBorder: false,
}
},
],
xAxes: [{
barPercentage:1.0 ,
categoryPercentage: 0.6,
gridLines: {
drawOnChartArea: false,
display: false,
}
}],
},
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
}
});
}