How to Implement Comparison Report with Bar Chart using ASP.NET.

Introduction

In this post, I explain how to Implement Comparison Report with Bar Chart using ASP.NET.
Visualization can be a very powerful and convincing instrument to present our data. One should always clearly understand what exactly we want to show. Bar charts is a great way to compare items side-by-side. Bar charts also handle multiple data series, for this features we can use this bar charts to compare Data.

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 Comparison Report with Bar Chart from Database Data.

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>Sales Comparison Report with Chart using ASP.NET.</h3>
    <table width="100%">
        <tr>
            <td width="35%" valign="top">
                <asp:GridView ID="gvSales" runat="server" AutoGenerateColumns="false" Width="95%">
                    <Columns>
                        <asp:BoundField HeaderText="Year" DataField="Year" />
                        <asp:BoundField HeaderText="Quarter 1" DataField="Quarter1" />
                        <asp:BoundField HeaderText="Quarter 2" DataField="Quarter2" />
                        <asp:BoundField HeaderText="Quarter 3" DataField="Quarter3" />
                        <asp:BoundField HeaderText="Quarter 4" DataField="Quarter4" />
                    </Columns>
                </asp:GridView>
            </td>
            <td width="50%" valign="top">
                
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Chart ID="Chart1" runat="server" BorderlineWidth="0" Width="800px">
                    <Series>
                        <asp:Series Name="Series1" XValueMember="Year" YValueMembers="Quarter1"
                            LegendText="Quarter 1" IsValueShownAsLabel="false" ChartArea="ChartArea1"
                            MarkerBorderColor="#DBDBDB">
                        </asp:Series>

                        <asp:Series Name="Series2" XValueMember="Year" YValueMembers="Quarter2"
                            LegendText="Quarter 2" IsValueShownAsLabel="false" ChartArea="ChartArea1"
                            MarkerBorderColor="#DBDBDB">
                        </asp:Series>

                        <asp:Series Name="Series3" XValueMember="Year" YValueMembers="Quarter3"
                            LegendText="Quarter 3" IsValueShownAsLabel="false" ChartArea="ChartArea1"
                            MarkerBorderColor="#DBDBDB">
                        </asp:Series>

                        <asp:Series Name="Series4" XValueMember="Year" YValueMembers="Quarter4"
                            LegendText="Quarter 4" IsValueShownAsLabel="false" ChartArea="ChartArea1"
                            MarkerBorderColor="#DBDBDB">
                        </asp:Series>
                    </Series>
                    <Legends>
                        <asp:Legend Title="Quarter" />
                    </Legends>
                    <Titles>
                        <asp:Title Docking="Bottom" Text="Sales Report Quarterly" />
                    </Titles>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </td>
        </tr>
    </table>

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

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

Here is the function...

            
        private void PopulateReport()
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                var v = dc.SalesDatas.ToList();


                gvSales.DataSource = v;
                gvSales.DataBind();

                Chart1.DataSource = v;
                Chart1.DataBind();
            }
        }