Chartjs-Convert/transpose one array into another in JavaScript?

by

1👍

First, you need to pull apart the model data:

const hashed = raw.model.reduce((acc, item) => {
  Object.keys(acc).forEach(k => acc[k].push(item[k]);
  return acc;
}, {
  value1: [],
  value2: [],
  value3: [],
  value4: [],
});

Then we can turn it into data for chart.js:

const chartData = Object.entries(hashed).map(([label, data]) => ({
  data,
  label,
  fill: false,
}));

Only thing left is to pick colors (random? if not make a mapping from label to color) and maybe format the label/key.

0👍

The two tasks for conversion is extracting the time stamps to make the label array, and then transposing the values. To iterate over them you can use a simple for loop like

for(obj in model)
{
    model[obj] // Trick here is that obj is an index not the object itself
}

You could also take Dallas comment into consideration and try using map. This would be much more concise. Because once you have the labels set up you could Dallas’s example like so to easily transpose the data.

var colors = {/*maps value name to desired color*/};
var valueLabels = {/*maps value name to value labels*/};
var valueNames = [/* list of value names*/];
for(var i in valueNames) {
    var dataVals = raw.model.map(x => x[valueNames[i]]);
    data.datasets.push({
         data: dataVals,
         label: valueLabels[valueNames[i]],
         borderColor: colors[valueNames[i]],
         fill: false
   });
}

Hope this example helps!

Leave a comment