Chart.DataBindTable Example

binding data to chart control using DataBindTable() method.
Steps to use DataBindTable() method


step 1: Create TblEmployee table 

Create Table TblEmployee

(

     ID int primary key identity,

     EmployeeName nvarchar(50),

     Salary int

)

insert into TblEmployee values('Srinath',50000)

insert into TblEmployee values('Naveen',60000)

insert into TblEmployee values('Krishna',70000)

step 2: add connectionstring in web.config file

   <connectionStrings>

    <add name="DBCS" connectionString="Data Source=SRINATH-PC\SQLEXPRESS;Initial Catalog=ChartAsp;User ID=sa;Password=alekhya"/>

  </connectionStrings>

Step 2 : When the DataBindTable() method is called, it automatically creates and adds a new series to the chart control. So, there is no need to specify the series in the HTML markup of the chart control. Delete the Series element from ChartControl.

Step 3: Modify the Html code in Webform1.aspx

<table style="border: 1px solid black; font-family: Arial">

            <tr>

                <td>

                    <b>Select Chart Type:</b>

                </td>

                <td>

                    <asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server"

                        onselectedindexchanged="DropDownList1_SelectedIndexChanged">

                    </asp:DropDownList>

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <asp:Chart ID="Chart1" runat="server">

                        <Titles>

                            <asp:Title Text="Employee Information">

                            </asp:Title>

                        </Titles>

                        <Series>

                        </Series>

                        <ChartAreas>

                            <asp:ChartArea Name="ChartArea1">

                                <AxisX Title="Employee Name">

                                </AxisX>

                                <AxisY Title="Salary">

                                </AxisY>

                            </asp:ChartArea>

                        </ChartAreas>

                    </asp:Chart>

                </td>

            </tr>

        </table>

Step 4: Write the code in Webform1.aspx.cs 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.DataVisualization.Charting;

using System.Data.SqlClient;

using System.Configuration;

namespace Chart.DataBindTable_Example

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                GetChartData();

                GetChartTypes();

            }

        }

        private void GetChartTypes()

        {

            foreach (int chartType in Enum.GetValues(typeof(SeriesChartType)))

            {

                ListItem li = new ListItem(Enum.GetName(typeof(SeriesChartType),

                    chartType), chartType.ToString());

                DropDownList1.Items.Add(li);

            }

        }

        private void GetChartData()

        {

            string connection = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

            using (SqlConnection con = new SqlConnection(connection))

            {

                SqlCommand cmd = new SqlCommand("select EmployeeName,Salary from TblEmployee", con);

                con.Open();

                SqlDataReader rdr = cmd.ExecuteReader();

                Chart1.DataBindTable(rdr,"EmployeeName");

             

            }

           

        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

        {

            GetChartData();

            this.Chart1.Series[0].ChartType = (SeriesChartType)Enum.Parse(

             typeof(SeriesChartType), DropDownList1.SelectedValue);

        }

    }

}

Run the Application