assigning line chart data in chartjs-CodePudding

I have an array with objects and I want to create a dataset for line chart in chartjs but the dataset that I get is wrong and hence getting two line charts instead of one. What am I doing wrong here?

const data = [{May 04: '', May 05: '1', May 06: ''}, {May 04: '2', May 05: '', May 06: ''}]

const chartData = {
          labels: ['May 04', 'May 05', 'May 06' ]
          datasets: getDataSet(data),
        };

const getDataSet = (data) => {
  const dataSet = [];


  dataSet.push({ label: 'Total' });
  data.forEach((v) => {
  dataSet.push({
    data: Object.values(v),
  });
})
  return dataSet;
};

CodePudding user response：

Your problem could be solved with the following code:

const data = [
  { 'May 04': '', 'May 05': '1', 'May 06': ''},
  { 'May 04': '2', 'May 05': '', 'May 06': ''}
];

const getDataSet = data => {  
  const dsData = [0, 0, 0];
  data.forEach(o => Object.values(o).forEach((v, i) => dsData[i] = Number(v)));
  return { 
    label: 'Total', 
    data: dsData
  };
};

const chartData = {
  labels: ['May 04', 'May 05', 'May 06'],
  datasets: [getDataSet(data)]
};

console.log(chartData);

In case your data is dynamic, it can be done as follows:

const data = [
  { 'May 04': '', 'May 05': '1', 'May 06': '', 'May 07': '1' },
  { 'May 04': '2', 'May 05': '', 'May 06': '', 'May 07': '2' }
];

const getDataSet = data => {  
  const dsData = Object.keys(data[0]).fill(0);
  data.forEach(o => Object.values(o).forEach((v, i) => dsData[i] = Number(v)));
  return { 
    label: 'Total', 
    data: dsData
  };
};

const chartData = {
  labels: Object.keys(data[0]),
  datasets: [getDataSet(data)]
};

console.log(chartData);

const data = [
  { 'May 04': '', 'May 05': '1', 'May 06': '', 'May 07': '1' },
  { 'May 04': '2', 'May 05': '', 'May 06': '', 'May 07': '2' }
];

const getDataSet = data => {  
  const dsData = Object.keys(data[0]).fill(0);
  data.forEach(o => Object.values(o).forEach((v, i) => dsData[i] = Number(v)));
  return { 
    label: 'Total', 
    data: dsData
  };
};

const chartData = {
  labels: Object.keys(data[0]),
  datasets: [getDataSet(data)]
};

new Chart('myChart', {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      y: {
        ticks: {
          stepSize: 1
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>