Apache Echarts dynamic series mapping

Question

I am trying to do a stacked device to version bar chart in apache echarts and am failing badly.. I came from another library where you just provide the grouping name and it was all automatic so echarts specifically typing the series, labels etc. is new to me.

I've been using echartsdemo as a point to play with it and added my data at the top.

It seems like you need to match the series data with the order of the categories but it always doesnt work for me..

Heres the code ive been trying with:

var data = [
  {
    "key": {
      "field1": "Device 1",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 2",
      "field2": "Unknown"
    },
    "doc_count": 4
  },
  {
    "key": {
      "field1": "Device 3",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.0"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.1"
    },
    "doc_count": 138
  }
]
var labels = Array.from(new Set(data.map((item) => item.key.field1)));
var series = Array.from(new Set(data.map((item) => item.key.field2)));

var seriesData = [];
data.forEach(version => { 
var added = false;

seriesData.forEach(iSeries => { 
if (iSeries.label == version.key.field2){
added = true;

if (!iSeries["added"].includes(version.key.field1)){
    iSeries["added"].push(version.key.field1);
    iSeries.data.push(version.doc_count);
}
else{
  iSeries.data.push(0);
}
}else{
     iSeries.data.push(0);
}
});

if (!added) {
 var newSeries = {
                  label:version.key.field2,
                  data:[version.doc_count],
                  added:[version.key.field1]
                  }
seriesData.push(newSeries);
}
});

console.log(seriesData);

const chartData = series.map((uniqueSrc) => {
      return {
        label: uniqueSrc,
        data: data.map((obj) => {
          if (obj.key.field1 == uniqueSrc) {
        
            return obj.doc_count;
          } else {
            return 0;
          }
        }),
      };
    });



data.forEach((device) => {


})


option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: labels
  },
  yAxis: {
    type: 'value'
  },
  series: seriesData.map((obj, index) => {
        return {
          name: obj.label,

          type: 'bar', stack: 'total',
          data: obj.data
        };
      })
};

Maybe there's an easier way? My data can be ordered by field1 or field2 as well but i tried both ways and couldnt get anything.

Thanks for any help or insight.

Answer 1

I got it working but it seems a bit messy. I changed the data source (nested the devices (categories) inside the versions (series) ):

var data = [
  {
    key: '1.6.1',
    doc_count: 138,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 138
        }
      ]
    }
  },
  {
    key: 'Unknown',
    doc_count: 6,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 2',
          doc_count: 4
        },
        {
          key: 'Device 3',
          doc_count: 1
        },
        {
          key: 'Device 4',
          doc_count: 1
        }
      ]
    }
  },
  {
    key: '1.6.0',
    doc_count: 1,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 1
        }
      ]
    }
  }
];

   var categories = [];
    this.deviceVersionChartData.forEach((version) => {
      version['sterms#deviceType'].buckets.forEach((category) => {
        if (!categories.includes(category.key)) {
          categories.push(category.key);
        }
      });
    });

    var seriesData = [];
    this.deviceVersionChartData.forEach((version) => {
      var counts = [];
      var firstRun = true;
      version['sterms#deviceType'].buckets.forEach((category) => {

        categories.forEach((cat) => {
          if (cat == category.key) {
            counts.push(category.doc_count);
          } else {
            if (firstRun) {
              counts.push(0);
            }

          }
          firstRun = false;
        });
      });

      var newSeries = {
        label: version.key,
        data: counts
      };
      seriesData.push(newSeries);
    });

This work perfectly... Can anyone see a better or cleaner way of getting to the same info?

Thanks,