1

This question for creating the Highcharts Donut chart with multiple series.

I have dynamic key properties xData, yData of JSON input data model:

  xData= ["Phase", "Step", "Task"];
  yData = ["VPhase", "VStep", "VTask"]

  inputArray = [
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 1", VTask: 20 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 2", VTask: 30 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 25 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 25 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 1", VTask: 60 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 2", VTask: 40 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 15 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 35 }
  ];

I need group and distinct consecutive index xData, yData for creating output result similar:

outputArray = [
    {
      Phase: ["Phase 1", "Phase 2"],
      VPhase: [100, 150]
    },
    {
      Step: ["Step 1", "Step 2", "Step 1", "Step 2"],
      VStep: [50, 50, 100 ,50]
    },
    {
      Task: ["Task 1", "Task 2", "Task 1", "Task 2", "Task 1", "Task 2", "Task 1", "Task 2"],
      VTask: [20, 30, 25, 25, 60, 40, 15, 35]
    }
  ];

Example

Moslem Shahsavan
  • 1,211
  • 17
  • 19
  • Hi @Moslem Shahsavan, You have used `highcharts` tag, but the problem doesn't seem to be about a chart - rather about data. If you'll have problems with Highcharts then please provide a demo with hard-coded, exemplary data. – ppotaczek Dec 02 '19 at 10:36

1 Answers1

1

With some effort I end up with this solution:

const inputArray = [
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 1", VTask: 20 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 2", VTask: 30 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 25 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 25 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 1", VTask: 60 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 2", VTask: 40 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 15 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 35 }
  ];

function getGroupedData(data, firsts, seconds) {
    const reduced = data.reduce(function(m, d) {
      if(!m) m = {};
      firsts.forEach(function(key) {        
        if(!m[key]) m[key] = [];
        m[key].push(d[key]);
      });

      seconds.forEach(function(key) {
        if(!m[key]) m[key] = [];
        m[key].push(d[key]);
      });

      
      return m;      
    }, {});

    const obj = [];
    for(var i in firsts){
      const o = {};
      o[firsts[i]] = reduced[firsts[i]]
      o[seconds[i]] = reduced[seconds[i]]
      obj.push(o);
    }

    const final = [];
    obj.forEach(c=>{
      var keys = Object.keys(c);
      for(var i in c[keys[0]]){
        const o = {};
        o[keys[0]] = c[keys[0]][i];
        o[keys[1]] = c[keys[1]][i];
        if(!final.some(p => p[keys[0]] == c[keys[0]][i] && p[keys[1]] == c[keys[1]][i]))
          final.push(o);
      }
    })

    const output = [];
    for(var i in firsts){
      const o = {};
      o[firsts[i]] = [];
      o[seconds[i]] = [];
      final.forEach(c=>{
        if(c[firsts[i]]){
          o[firsts[i]].push(c[firsts[i]]);
          o[seconds[i]].push(c[seconds[i]]);
        }
      })
      output.push(o);
    }

    console.log(output);
}

getGroupedData(inputArray, ["Phase", "Step", "Task"], ["VPhase", "VStep", "VTask"]);

https://stackblitz.com/edit/typescript-vryxjl

Elyas Esna
  • 625
  • 4
  • 19