CODEWITHSUNDEEP
vue.jsvuejs2
subham nayak
subham nayak

Reputation: 25

Apex Line Area chart is not getting displayed on the page in Vuejs

I am stuck on a page where i am not able to display the charts on the page.

To make it simplify what I have done is, here is the code sandbox: I see there an error in console about the data, I am not sure about it.

https://codesandbox.io/s/compassionate-snyder-bckoq

I want to display the chart like this (as an example), but I am not able to display on the code sandbox

enter image description here

Please help.

Upvotes: 0

Views: 1214

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

The format of series is not aligned with ApexCharts. You need to transform the data to match with ApexChart format.

Please see the changes in the codesandbox. https://codesandbox.io/s/small-dew-eztod?file=/src/components/HelloWorld.vue

options: {
    // X axis labels
    xaxis: {
        type: 'date',
        categories: ["2021-05-04", "2021-05-05", "2021-05-07"]
    },
},
series: [
    {
        name: "total",
        data: [2, 2, 1],
    },
    {
        name: "pending",
        data: [0, 1, 0],
    },
    {
        name: "approved",
        data: [2, 1, 1],
    },
    {
        name: "rejected",
        data: [0, 0, 0],
    },
],

Transform data to fit ApexChart

const data = {
  "2021-05-04": {
    total: 2,
    pending: 0,
    approved: 2,
    rejected: 0,
  },
  "2021-05-05": {
    total: 2,
    pending: 1,
    approved: 1,
    rejected: 0,
  },
  "2021-05-07": {
    total: 1,
    pending: 0,
    approved: 1,
    rejected: 0,
  },
};

const xaxis = {
  type: "date",
  categories: Object.keys(data).map((key) => key), // ['2021-05-04', '2021-05-05', '2021-05-07']
};

let statusObj = [];
for (const dataValue of Object.values(data)) { // get the values from keys '2021-05-04', '2021-05-05' ...

  // loop the values, e.g. 1st loop: { total: 2, pending: 0, approved: 2, rejected: 0, }
  for (const [key, value] of Object.entries(dataValue)) {

    // take 'total' as example, find if statusObj already has { name: 'total', data: [x] }, e.g. statusObj = { name: 'total', data: [1] }
    const existingStatusIndex = Object.keys(statusObj).find(
      (sKey) => statusObj[sKey].name === key
    );

    // if yes, return the index of it
    if (existingStatusIndex) {
      // add new data value to existing data object. e.g. { name: 'total', data: [1, 2] }
      statusObj[existingStatusIndex].data.push(value);
      continue;
    }

    // if no, create a new object and add it to statusObj
    statusObj.push({
      name: key,
      data: [value],
    });
  }
}

Output:

xaxis {
  type: 'date',
  categories: [ '2021-05-04', '2021-05-05', '2021-05-07' ]
}
statusObj [
  { name: 'total', data: [ 2, 2, 1 ] },
  { name: 'pending', data: [ 0, 1, 0 ] },
  { name: 'approved', data: [ 2, 1, 1 ] },
  { name: 'rejected', data: [ 0, 0, 0 ] }
]

Upvotes: 1

Related Questions