How to Implement Chart Control inside Gridview using ASP.NET.

Introduction

In this post, I explain how to Implement Chart Control inside Gridview using ASP.NET.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table for Fetch Data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used table as below

IMAGE 1

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for show Chart with Database data inside Gridview.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code

     <h3>Chart inside gridview showing Sales Report </h3>
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Width="700px" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" ItemStyle-Width="120px" />
                <asp:TemplateField HeaderText="Sales Data">
                    <ItemTemplate>
                        <div>
                            <asp:Chart ID="Chart1" runat="server" Width="550px" Height="200px">
                                <Series>
                                    <asp:Series Name="Series1"></asp:Series>
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                                </ChartAreas>
                            </asp:Chart>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

Step-6: Write code in page_load event for fetch data from database and show in Gridview.

            
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PopulateData();
            }
        }

Here is the function...

            
        private void PopulateData()
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                var v = (from a in dc.SalesDatas
                         select new
                         {
                             a.EmployeeName
                         }).Distinct();
                GridView1.DataSource = v.ToList();
                GridView1.DataBind();
            }
        }

Step-7: Write code in GridView1_RowDataBound for bind Database data with chart control inside gridview.

            
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                string empName = DataBinder.Eval(e.Row.DataItem, "EmployeeName").ToString();
                Chart chart = (Chart)e.Row.FindControl("Chart1");
                if (chart != null)
                {
                    using (MyDatabaseEntities dc = new MyDatabaseEntities())
                    {
                        var v = dc.SalesDatas.Where(a => a.EmployeeName.Equals(empName)).ToList();
                        chart.DataSource = v;
                        chart.Series["Series1"].XValueMember = "MonthName";
                        chart.Series["Series1"].YValueMembers = "SalesAmount";
                        chart.DataBind();

                        // for force to print each label
                        chart.ChartAreas[0].AxisX.LabelStyle.Interval = 1;

                    }
                }
            }
        }