how to create custom object for Highcharts series-CodePudding

I have a custom data to show in Highcharts column stack chart, please look below data and code

var data = [
        {
            "personId": "ff6b9c90-3961-4995-b05c-eaa8c0689f7c",
            "pid": "PID-2",
            "averageCycleTime": 3.216666666666667,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "4019551e-b6b8-45cb-8df6-1c8c3c9d8995",
                    "visionCycleId": "1",
                    "cycleDuration": 4.433333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "de3203bc-9a82-4aaa-a448-ea83d51793e1",
                    "visionCycleId": "2",
                    "cycleDuration": 3.7333333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "7418d534-4159-4f0c-8dbe-3271dcf16f24",
                    "visionCycleId": "3",
                    "cycleDuration": 3.7333333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "066cc343-7924-4c9e-86df-f062f9987183",
                    "visionCycleId": "0",
                    "cycleDuration": 0.9666666666666667,
                    "actionDetails": null
                }
            ]
        },
        {
            "personId": "6ce9ac4d-f32b-468e-809a-24ae51e00544",
            "pid": "PID-3",
            "averageCycleTime": 0.26666666666666666,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "55aab433-b2d8-4e62-a40b-d6b15610fc37",
                    "visionCycleId": "0",
                    "cycleDuration": 0.26666666666666666,
                    "actionDetails": null
                }
            ]
        },
        {
            "personId": "d7a4362f-07f9-4e64-9ccb-be8d0a194c61",
            "pid": "PID-4",
            "averageCycleTime": 4.133333333333333,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "c664f6ce-a1fd-4d44-96f6-0236181fd784",
                    "visionCycleId": "1",
                    "cycleDuration": 3.8333333333333335,
                    "actionDetails": null
                },
                {
                    "cycleId": "fc53a523-9d32-40ea-af3d-957122fb979e",
                    "visionCycleId": "2",
                    "cycleDuration": 3.8,
                    "actionDetails": null
                },
                {
                    "cycleId": "791666d3-b1f9-4bcf-ad13-8639bfd2ead9",
                    "visionCycleId": "0",
                    "cycleDuration": 4.766666666666667,
                    "actionDetails": null
                }
            ]
        }
    ]

from this im using below javascript code to convert into highcharts series data

let sortedArray : any;
     sortedArray =  data.sort((a : any,b : any)=> a.pid.localeCompare(b.pid));
let personIDList = sortedArray.map((pItems : any,idx : any)=> pItems.pid);
    const series = customJson.map((value, key) => {
      return {
        name: `Cycle-${key   1}`,
        data: value.cycleDetails.map((v) => ({
          y: v.cycleDuration,
          videoId: v.cycleId,
        })),
      };
    });

in the above, I sorted the array based on PID and then extract the PID for setting up Category. Below is chart configurations, Check the chart configurations with data

{
        chart: {
          type: 'column'
        },
        title: false,
        xAxis: {
            categories: this.personIDList,
            labels :{
              style : {
                color : '#1e272e',
                cursor : 'pointer'
              }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Cycle Time (Sec\'s)'
            },
            gridLineWidth : 1,
            gridLineColor : '#f5f6fa',
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: 'gray',
                    textOutline: 'none'
                }
            }
        },
        legend: {
            align: 'center',        
            verticalAlign: 'bottom',        
            backgroundColor: 'white',
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            column: {
                pointWidth : 30,
                borderRadius : 8,
                stacking : 'normal',
                dataLabels: {
                    enabled: false
                },
            },
            series : {
              point: {
                events: {
                  click: function(this : any){                               
                                              
                  }
                }
              }
            }
        },
        series: series
      }

With above code my result is

in this picture Blue color bars are related to PID-2 but here all data is shuffled with all PID. I need to show all PID details in the same column based on the PID name.

my expected data chart should be

CodePudding user response：

You need to build series structure required by Highcharts. For example:

const sortedArray = data.sort((a, b) => a.pid.localeCompare(b.pid));
const personIDList = sortedArray.map((pItems, idx) => pItems.pid);

const series = [];

sortedArray.forEach(pid => {
    pid.cycleDetails.sort((a, b) => a.visionCycleId.localeCompare(b.visionCycleId));
    pid.cycleDetails.forEach((cycle, index) => {
        if (series[index]) {
            series[index].data.push(cycle.cycleDuration);
        } else {
            series.push({
                name: 'Cycle-'   cycle.visionCycleId,
                data: [cycle.cycleDuration]
            });
        }
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    xAxis: {
        categories: personIDList
    },
    yAxis: {
        reversedStacks: false
    },
    series
});

Live demo: http://jsfiddle.net/BlackLabel/xLjsq596/

API Reference: https://api.highcharts.com/highcharts/yAxis.reversedStacks

CodePudding user response：

You can get the result you want by first extracting all the raw data from your input into a nested object with top-level keys of visionCycleId and lower level keys of pid (this is called rawData in the snippet). This can then be post-processed using the list of pid values to generate the data arrays for charting:

data.sort((a, b) => a.pid.localeCompare(b.pid))

const personIDList = data.map(({ pid }) => pid);

// get the data
const rawData = data.reduce((acc, { pid, cycleDetails }) => {
  cycleDetails.forEach(({ visionCycleId, cycleDuration }) => 
    acc[visionCycleId] = Object.assign(acc[visionCycleId] || {}, { [pid] : cycleDuration }))
  return acc
}, {})

const series = Object.entries(rawData)
  .map(([k, v]) => ({
    name: `Cycle-${k}`,
    data: personIDList.map(pid => v[pid] || 0)
  }))

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  xAxis: {
    categories: personIDList
  },
  yAxis: {
    reversedStacks: false
  },
  accessibility: {
    enabled: false
  },
  series
});

<script src="https://code.highcharts.com/highcharts.js"></script><script type="text/javascript">
  var data = [{
      "personId": "ff6b9c90-3961-4995-b05c-eaa8c0689f7c",
      "pid": "PID-2",
      "averageCycleTime": 3.216666666666667,
      "idealCycleTime": 5,
      "cycleDetails": [{
          "cycleId": "4019551e-b6b8-45cb-8df6-1c8c3c9d8995",
          "visionCycleId": "1",
          "cycleDuration": 4.433333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "de3203bc-9a82-4aaa-a448-ea83d51793e1",
          "visionCycleId": "2",
          "cycleDuration": 3.7333333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "7418d534-4159-4f0c-8dbe-3271dcf16f24",
          "visionCycleId": "3",
          "cycleDuration": 3.7333333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "066cc343-7924-4c9e-86df-f062f9987183",
          "visionCycleId": "0",
          "cycleDuration": 0.9666666666666667,
          "actionDetails": null
        }
      ]
    },
    {
      "personId": "6ce9ac4d-f32b-468e-809a-24ae51e00544",
      "pid": "PID-3",
      "averageCycleTime": 0.26666666666666666,
      "idealCycleTime": 5,
      "cycleDetails": [{
        "cycleId": "55aab433-b2d8-4e62-a40b-d6b15610fc37",
        "visionCycleId": "0",
        "cycleDuration": 0.26666666666666666,
        "actionDetails": null
      }]
    },
    {
      "personId": "d7a4362f-07f9-4e64-9ccb-be8d0a194c61",
      "pid": "PID-4",
      "averageCycleTime": 4.133333333333333,
      "idealCycleTime": 5,
      "cycleDetails": [{
          "cycleId": "c664f6ce-a1fd-4d44-96f6-0236181fd784",
          "visionCycleId": "1",
          "cycleDuration": 3.8333333333333335,
          "actionDetails": null
        },
        {
          "cycleId": "fc53a523-9d32-40ea-af3d-957122fb979e",
          "visionCycleId": "2",
          "cycleDuration": 3.8,
          "actionDetails": null
        },
        {
          "cycleId": "791666d3-b1f9-4bcf-ad13-8639bfd2ead9",
          "visionCycleId": "0",
          "cycleDuration": 4.766666666666667,
          "actionDetails": null
        }
      ]
    }
  ]
</script>
<div id="container"></div>