Displaying Barchart with multiple datasets dynamically - Chart Js

Question

Hi All,

I want to display a barchart with multiple datasets as shown below,

i'm able to fetch the data as shown below

But how to convert this json array as below code. I need to show the attendance percentage for each shift for last 7 days.

var barChartDataDaily = {
        labels: [@Html.Raw("'" + String.Join("','", (Model.GetWeeklyData.GroupBy(c => c.FormattedAccessDate).Select(c => c.First().FormattedAccessDate).ToList()))+"'" )],
        datasets: [
            {
                label: "First Shift",
                backgroundColor: "#7F1E5E",
                borderColor: "#7F1E5E",
                borderWidth: 1,
                data: [14, 27, 33, 46, 100, 67, 74]
            },
            {
                label: "Second Shift",
                backgroundColor: "#CE6D28",
                borderColor: "#CE6D28",
                borderWidth: 1,
                data: [14, 27, 33, 46, 100, 67, 74]
            },
            {
                label: "Third Shift",
                backgroundColor: "#005486",
                borderColor: "#005486",
                borderWidth: 1,
                data: [100, 27, 34, 56, 69, 87, 73]
            }
        ]
    };

Appreciate your help for this. Thanks!