Display and bind AJAX Bar Chart inside ASP.Net GridView

You can also do this by AjaxBarChart Control.

Ref:

http://www.aspsnippets.com/Articles/ASPNet-AJAX-Bar-Chart-Control-Populate-from-Database-example.aspx

HTML:

<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>   
<hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="700px"
    OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField HeaderText="shipcountry" DataField="shipcountry" ItemStyle-Width="120px" />
        <asp:TemplateField HeaderText="Sales Data">
            <ItemTemplate>
                <div>
                    <cc1:BarChart ID="BarChart1" runat="server" ChartHeight="300" ChartWidth="450" ChartType="Column"
                        ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" ValueAxisLineColor="#D08AD9"
                        BaseLineColor="#A156AB">
                    </cc1:BarChart>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</form>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string query = "select distinct shipcountry from orders";
        DataTable dt = GetData(query);
        this.GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string country = e.Row.Cells[0].Text;
        BarChart chart = (BarChart)e.Row.FindControl("BarChart1");
        if (chart != null)
        {
            string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", country);
            DataTable dt = GetData(query);

            string[] x = new string[dt.Rows.Count];
            decimal[] y = new decimal[dt.Rows.Count];
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                x[i] = dt.Rows[i][0].ToString();
                y[i] = Convert.ToInt32(dt.Rows[i][1]);
            }
            chart.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = y });
            chart.CategoriesAxis = string.Join(",", x);
            chart.ChartTitle = string.Format("{0} Order Distribution", country);
            if (x.Length > 3)
            {
                chart.ChartWidth = (x.Length * 100).ToString();
            }
        }
            
    }
}

private static DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

Image:

Thank You.