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.
from chart.js line chart with unknown datasets
No comments:
Post a Comment