Populate Multi-Series (Multi-Column) Bar Chart from database using jQuery ChartJS Plugin in ASP.Net

Check the below code for different type of chart for the data as per the link you shared.

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        DrawChart($('#RadioButtonList1').find('input[type=radio]:checked').val());
    });
    function DrawChart(chartType) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var label = response.d.Labels;
                var datasetLabels = response.d.DatasetLabels;
                var datasetDatas = response.d.DatasetDatas;
                var dataSets = [];
                for (var i = 0; i < datasetDatas.length; i++) {
                    var dataSet = {
                        label: datasetLabels[i],
                        backgroundColor: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
                        borderColor: 'red',
                        borderWidth: 1,
                        data: datasetDatas[i]
                    };
                    dataSets.push(dataSet);
                }
                var ctx = document.getElementById("Chart1").getContext('2d');
                new Chart(ctx, {
                    type: chartType,
                    data: { labels: label, datasets: dataSets },
                    options: {
                        responsive: true,
                        title: { display: true, text: 'Card Details' },
                        legend: { display: true, position: "top" },
                        layout: {
                            padding: { left: 50, right: 50, top: 50, bottom: 50 }
                        },
                        scales: {
                            yAxes: [{ ticks: { beginAtZero: true } }]
                        }
                    }
                });
            }
        });
    }
</script>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" RepeatDirection="Horizontal">
    <asp:ListItem Text="Bar" Value="bar" Selected="True" />
    <asp:ListItem Text="Column" Value="horizontalBar" />
    <asp:ListItem Text="Line" Value="line" />
    <asp:ListItem Text="Radar" Value="radar" />
</asp:RadioButtonList>
<hr />
<canvas id="Chart1" style="width: 75%; height: 75%"></canvas>

Code

[WebMethod]
public static ChartData GetChartData()
{
    // Get the datas from database.
    ChartData chartData = new ChartData();
    chartData.Labels = new string[] { "Absence of OB", "Closeness", "Credibility", "Heritage", "M Disclosure", "Provenance", "Reliability", "Transparency" };
    chartData.DatasetLabels = new string[] { "American Express", "Mastercard", "Paypal", "Visa" };
    List<int[]> datasetDatas = new List<int[]>();
    datasetDatas.Add(new int[] { 3, 5, 6, 7, 3, 5, 6, 7 });
    datasetDatas.Add(new int[] { 4, 7, 3, 6, 10, 7, 4, 6 });
    datasetDatas.Add(new int[] { 10, 7, 4, 6, 9, 7, 3, 10 });
    datasetDatas.Add(new int[] { 6, 9, 7, 3, 10, 7, 4, 6 });
    chartData.DatasetDatas = datasetDatas;
    return chartData;
}

public class ChartData
{
    public string[] Labels { get; set; }
    public string[] DatasetLabels { get; set; }
    public List<int[]> DatasetDatas { get; set; }
}