Responsive Mobile Friendly Chart using jQuery in ASP.Net

Here I have created sample that will help you out.As you wanted to chart on the same page i have shown it on the same page,also as i have made ajax call so no need to use updatepanel.

HTML

<div>
    <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 () {
                $("[id*=dlBranches] [id*=linkBranch]").click(function () {
                    var row = $(this).closest('tr');
                    var branchId = $(row).find('[id*=hfBranchId]').val();
                    $.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: "grey",
                        strokeColor: "lightblue",
                        highlightFill: "lightgreen",
                        highlightStroke: "green",
                        data: datas
                    }
                ]
            };
                            var ctx = document.getElementById("canvas").getContext("2d");
                            window.myBar = new Chart(ctx).Bar(barChartLocData, {
                                responsive: true
                            });
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                });
            });
        </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>
        <br />
        <br />
    </div>
    <div style="width: 40%">
        <canvas id="canvas" height="300" width="300"></canvas>
    </div>
</div>

Code

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();
    }
}

[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