Exploring angular for the first time and currently working with Angular 7. I am in need of converting my api data into the ng2-charts format.
This is a snippet of my api data:
{
"status": 200,
"message": "Fetched Successfully",
"data": [
{
"1": [
{
"productid": "5c595f1c736429312f1ee15b",
"totalQty": 5
},
{
"productid": "5c595f1c736429312f1ee158",
"totalQty": 54
},
{
"productid": "5c595f1c736429312f1ee157",
"totalQty": 156
}
],
"2": [
{
"productid": "5c595e3b736429312f1ee155",
"totalQty": 15
},
{
"productid": "5c595f1c736429312f1ee157",
"totalQty": 42
}
],
"5": [
{
"productid": "5c595e3b736429312f1ee155",
"totalQty": 50
},
{
"productid": "5c595f1c736429312f1ee157",
"totalQty": 70
}
],
"12": [
{
"productid": "5c595e3b736429312f1ee145",
"totalQty": 17
},
{
"productid": "5c595f1c736429312f1ee157",
"totalQty": 5
}
]
}
]
}
Below shows the desired output format:
public barChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
public barChartType = 'bar';
public barChartLegend = true;
public barChartData = [
{ data: [5], label: '5c595f1c736429312f1ee15b' },
{ data: [54], label: '5c595f1c736429312f1ee158' },
{ data: [156, 42, , , 70, , , , , , , 5], label: '5c595f1c736429312f1ee157' },
{ data: [, 15, , , 50], label: '5c595e3b736429312f1ee155' },
{ data: [, , , , , , , , , , , 17], label: '5c595e3b736429312f1ee145' },
{ data: [, 15], label: '5c595e3b736429312f1ee145' }
];
I aim to create a dynamic chart as more data will be fetched from the api over time.
Attempts at using loops have proven to complicate matters and consume more time, thus exploring more efficient solutions.
Appreciate your assistance in advance