d3.js multi lines chart using dataset with nested object

user_10458364 0
Viewed 47

I am trying to build a multi line chart with a legend using d3.js v4, I coudn't find a similar example and it is difficult to me build it from scratch. I want to display a line for each "metric" through the date. This is the dataset:

[
    {
        "id": "1",
        "description": "some-description",
        "date": "2022-01-01 09:25:00",
        "interval": "5",
        "key": "time_percent",
        "data": [
            "metric_1": 0,
            "metric_2": 5.8,
            "metric_3": 7,
            "metric_4": 8.1,
            "metric_5": 0,
            "metric_6": 0.83,
            "metric_7": 0,
            "metric_8": 0.23,
            "metric_9": 0.89,
            "metric_10": 4.76
        ]
    }
]

Any idea how to get it?

d3.js charts svg multiline
1 Answers

Extract singe lines on by one with map :

const extractLine = metricIndex => {
  const attribute = `metric_${metricIndex}`;
  return data.map(item => ({...item, data: data[attribute]}));
}

const line1_data = exctractLine(1);
...
const lineN_data = exctractLine(N);

...and build single-line charts one by one

user_107564890
Related