Create Line chart from database using jQuery Chart js plugin in ASP.Net

Hi isha,

I have created sample. Refer the below code. Simply you just need to bind the datatable from database.

You can download the js file from the below link.

Chart.min.js

HTML

Default.aspx

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=dlBranches] [id*=linkBranch]").click(function () {
                var row = $(this).closest('tr');
                var branchId = $(row).find('[id*=hfBranchId]').val();
                var url = window.location.href;
                url = url.substring(0, url.lastIndexOf('/') + 1);
                url += "Charts.aspx?BranchId=" + branchId;
                window.open(url, "Popup", "width=300,height=300");
            });
        });
    </script>
    <asp:DataList ID="dlBranches" runat="server" CellPadding="4">
        <HeaderTemplate>
            <table border="0" cellpadding="0" cellspacing="0" width="120px">
                <tr>
                    <th>
                        Branch Name
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td align="center">
                    <a id="linkBranch" href="#">
                        <%# Eval("BranchName")%></a>
                    <input id="hfBranchId" type="hidden" value='<%# Eval("BranchId") %>' />
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:DataList>
</div>

Charts.aspx

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="Js/Chart.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var branchId = window.location.href.split('?').pop().split('=').pop();
            $.ajax({
                url: '<%=ResolveUrl("~/Charts.aspx/GetData") %>',
                data: "{ 'branchId': '" + branchId + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var labels = [];
                    var datas = [];
                    $.each(data.d, function (i, item) {
                        var l = item.split('-')[0];
                        var d = item.split('-')[1];
                        labels.push(l);
                        datas.push(d);
                    });
                    var barChartLocData =
                        {
                            labels: labels,
                            datasets:
                            [
                                {
                                    fillColor: "green",
                                    strokeColor: "lightblue",
                                    highlightFill: "lightgreen",
                                    highlightStroke: "green",
                                    data: datas
                                }
                            ]
                        };
                    var ctx = document.getElementById("canvas").getContext("2d");
                    window.myBar = new Chart(ctx).Line(barChartLocData, {
                        responsive: true,
                        datasetFill: false
                    });
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        });
    </script>
    <div>
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>
</div>

Code

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("BranchId", typeof(int));
        dt.Columns.Add("BranchName");
        dt.Rows.Add(121, "Mumbai");
        dt.Rows.Add(131, "Pune");
        dt.Rows.Add(151, "Bangalore");
        dlBranches.DataSource = dt;
        dlBranches.DataBind();
    }
}

Charts.aspx.cs

WebMethod]
public static string[] GetData(int branchId)
{
    return GetDataByBranchId(branchId);
}

private static string[] GetDataByBranchId(int branchId)
{
    List<string> data = new List<string>();
    DataTable dt = new DataTable();
    dt.Columns.Add("label");
    dt.Columns.Add("Data");
    dt.Columns.Add("BranchId", typeof(int));
    dt.Rows.Add("January", "50", 121);
    dt.Rows.Add("February", "20", 121);
    dt.Rows.Add("March", "80", 121);
    dt.Rows.Add("January", "10", 131);
    dt.Rows.Add("February", "50", 131);
    dt.Rows.Add("March", "30", 131);
    dt.Rows.Add("January", "70", 151);
    dt.Rows.Add("February", "50", 151);
    dt.Rows.Add("March", "80", 151);
    var resultdata = from d in dt.AsEnumerable()
                        where int.Parse(d["BranchId"].ToString()) == branchId
                        select d;
    foreach (var item in resultdata)
    {
        data.Add(string.Format("{0}-{1}", item["label"], item["Data"]));
    }
    return data.ToArray();
}

Screenshot