I am currently working on generating a multi-set line graph using Chart.js and Angular. With the help of map function, I have been able to transform the JSON data into a single-dimensional array. However, my challenge lies in converting one of the columns (head) as the label, average column as the y-axis, and timestamp column as the x-axis.
Here is a sample JSON format output from the database:
const dataset =
[{id:1, head:test1,timestamp:5/6/2019,average:12},
{id:2, head:test1,timestamp:6/6/2019,average:15},
{id:3, head:test2,timestamp:5/6/2019,average:7},
{id:4, head:test2,timestamp:6/6/2019,average:20},
{id:5, head:test3,timestamp:6/6/2019,average:13}]
The expected format for Chart.js for the multi-y-axis output should look like this:
{data : [12, 15], label:test1},
{data : [7, 20], label:test2},
{data : [0, 13], label:test3},
Although I can easily convert each column's data into a single-dimensional array, there could be discrepancies if I attempt to create a graph directly from it since the whole dataset has been converted to a 1D array.
const labels = dataset.map(function(obj) {return obj.head});
const tstamp = dataset.map(function(obj) {return obj.timestamp});
const tavg = dataset.map(function(obj) {return obj.average});
I would appreciate any suggestions you may have on how to properly convert the data into the expected format.