chart.js line chart with unknown datasets - Html

RodneyEllis
March 1, 2023
272 views
0 votes
2 Answers

I have found plenty of examples of how to build a Chart.Js line chart with multiple lines over time, but all of these have a fixed number of datasets.

What I am trying to do is have the x-axis be days, and the y-axis have multiple integers … however at the time of development I don’t know how many lines there are to be.

Here is a sample of the json:

[
    {
        "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
    }
]

In this example there are only 3 account statuses, but some clients have 3, others have 10 or more. So how do I configure this to build the line chart to cater for all of them?

Here is my attempt, and you can see where I have the comments in datasets:

    function createLineChart(data) 
    {
        let xValues = data.map(data => {
          return  data.snapShotTS
        })

        new Chart("myChart", {
          type: "line",
          data: {
            labels: xValues,
            datasets: [               
                // How to build this dynamically?
            ]
          },
          options: {
            legend: {display: false}
          }
        });
    }

I can hard-code these 3 account statuses in there and it will for this client, but not for a different client’s statuses.

Thanks in advance.

ps. here is an image of how it needs to look with 3 datasets. We just need to have it with X datasets.

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

chart.js line chart with unknown datasets – Html

Answers