Chartjs-Chart.js line chart with unknown datasets

by

1👍

✅

You can transform your raw data into Chart.js datasets with the Array.reduce() method as follows:

const datasets = rawData.reduce((acc, curr) => {
  let dataset = acc.find(ds => ds.label == curr.accountStatus);
  if (!dataset) {
    dataset = { 
      label: curr.accountStatus, 
      data: [],
      borderColor: colors[curr.accountStatus]
    };
    acc.push(dataset);
  }
  dataset.data.push({ 
    x: curr.snapShotTS, 
    y: curr.accountCount 
  });
  return acc;
}, []);

This creates individual dataset.data as an array of objects, having a x and y property each.

Please take a look at below runnable code snippet and see how it works.

const rawData = [
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 67
    },
    {
        "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-23T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-24T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-25T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-26T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-27T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 47
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-28T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 47
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-01-29T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 46
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 71
    },
    {
        "snapShotTS": "2023-01-30T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 48
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 71
    },
    {
        "snapShotTS": "2023-01-31T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-01T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-02T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 70
    },
    {
        "snapShotTS": "2023-02-03T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-04T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-05T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-06T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 69
    },
    {
        "snapShotTS": "2023-02-07T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-08T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-09T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-10T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-11T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-12T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-13T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-14T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-15T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-16T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-17T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Casual",
        "accountCount": 49
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Direct Debit",
        "accountCount": 68
    },
    {
        "snapShotTS": "2023-02-18T00:00:00.0000000+11:00",
        "accountStatus": "Staff",
        "accountCount": 6
    }
]

const colors = {
  'Direct Debit': 'red',
  Casual: 'green',
  Staff: 'blue'
};
const datasets = rawData.reduce((acc, curr) => {
  let dataset = acc.find(ds => ds.label == curr.accountStatus);
  if (!dataset) {
    dataset = { 
      label: curr.accountStatus, 
      data: [],
      borderColor: colors[curr.accountStatus]
    };
    acc.push(dataset);
  }
  dataset.data.push({ 
    x: curr.snapShotTS, 
    y: curr.accountCount 
  });
  return acc;
}, []);

new Chart('chart', {
    type: 'line',
    data: {
      datasets: datasets
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {       
            unit: 'day',              
            displayFormats: {
              day: 'dd MMM',
            },
            tooltipFormat: 'dd MMM yyyy' 
          }
       }
     }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
<canvas id="chart" height="90"></canvas>

-1👍

do you want to show in the graph the number of accounts per account status?
here is a simplified version, look:

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  var accounts = [{
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Casual",
      "accountCount": 48
    },
    {
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Direct Debit",
      "accountCount": 67
    },
    {
      "snapShotTS": "2023-01-22T00:00:00.0000000+11:00",
      "accountStatus": "Staff",
      "accountCount": 6
    }
  ]

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: accounts.map(acc => acc.accountStatus),
      datasets: [{
        label: '# account counts',
        data: accounts.map(acc => acc.accountCount),
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

</script>

Leave a comment