Generate Horizontal Bar Chart from Database using jQuery ChartJS Plugin in ASP.Net

Hi EmadKhan,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetChartData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var data = response.d.Datas;
                var label = response.d.Labels;
                var ctx = document.getElementById("Chart1").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: {
                        labels: label,
                        datasets: [{
                            data: data,
                            backgroundColor: 'indigo'
                        }]
                    }, options: {
                        title: { display: false, text: 'Largest Cities' },
                        legend: { display: false },
                        layout: {
                            padding: {
                                left: 50,
                                right: 50,
                                top: 50,
                                bottom: 50
                            }
                        }
                    }
                });
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
</script>
<canvas id="Chart1" width="500" height="300"></canvas>

Namespaces

C#

using System.Data;
using System.Web.Services;

VB.Net

Imports System.Web.Services
Imports System.Data

Code

C#

[WebMethod]
public static ChartData GetChartData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("ProjectName", typeof(string)),
                        new DataColumn("Completed", typeof(int)) });
    dt.Rows.Add("Amityville house", 23);
    dt.Rows.Add("Antila Home", 30);
    dt.Rows.Add("Beacon House", 30);
    dt.Rows.Add("Green Valley", 100);
    dt.Rows.Add("Park View Ambient medical center", 22);
    string[] labels = (from p in dt.AsEnumerable()
                        select p.Field<string>("ProjectName")).Distinct().ToArray();
    int[] datas = (from p in dt.AsEnumerable()
                    select p.Field<Int32>("Completed")).ToArray();
    ChartData chartData = new ChartData();
    chartData.Labels = labels;
    chartData.Datas = datas;

    return chartData;
}

public class ChartData
{
    public string[] Labels { get; set; }
    public int[] Datas { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As ChartData
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("ProjectName", GetType(String)), New DataColumn("Completed", GetType(Integer))})
    dt.Rows.Add("Amityville house", 23)
    dt.Rows.Add("Antila Home", 30)
    dt.Rows.Add("Beacon House", 30)
    dt.Rows.Add("Green Valley", 100)
    dt.Rows.Add("Park View Ambient medical center", 22)
    Dim labels As String() = (From p In dt.AsEnumerable() Select p.Field(Of String)("ProjectName")).Distinct().ToArray()
    Dim datas As Integer() = (From p In dt.AsEnumerable() Select p.Field(Of Int32)("Completed")).ToArray()
    Dim chartData As ChartData = New ChartData()
    chartData.Labels = labels
    chartData.Datas = datas
    Return chartData
End Function

Public Class ChartData
    Public Property Labels As String()
    Public Property Datas As Integer()
End Class

Screenshot