Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

How to bind data from database to chart control in

Suggested Videos
Part 1 - ASP.NET Chart Control
Part 2 - How to set chart control ChartType property dynamically
Part 3 - Creating chart data programmatically

In Part 3 of this video series, we discussed programatically creating data for chart control. But in that example, we have hard-coded the data in the code-behind file. In this video, we will discuss retrieving data from the database and then programatically adding that data to the chart control. We will be continuing with the example we worked with in Part 3.

Step 1 : Create Students table
Create Table Students
     ID int primary key identity,
     StudentName nvarchar(50),
     TotalMarks int

Insert into Students values('Mark', 800)
Insert into Students values('Steve', 900)
Insert into Students values('John', 700)
Insert into Students values('Mary', 900)
Insert into Students values('Ben', 600)

Step 2 : In web.config file, add the connection string to your database
<add name="CS"
         connectionString="server=.;database=Sample;integrated security=SSPI"/>

Step 3 : Modify the code in the code-behind file as shown below. The code is commented and self explanatory.
using System;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls;

namespace ChartsDemo
    public partial class WebForm1 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                // Call Get ChartData() method in the PageLoad event

        private void GetChartData()
            string cs = ConfigurationManager.ConnectionStrings["CS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
                // Command to retrieve Students data from Students table
                SqlCommand cmd = new
                    SqlCommand("Select StudentName, TotalMarks from Students", con);
                SqlDataReader rdr = cmd.ExecuteReader();
                // Retrieve the Series to which we want to add DataPoints
                Series series = Chart1.Series["Series1"];
                // Loop thru each Student record
                while (rdr.Read())
                    // Add X and Y values using AddXY() method

        private void GetChartTypes()
            foreach (int chartType in Enum.GetValues(typeof(SeriesChartType)))
                ListItem li = new ListItem(Enum.GetName(typeof(SeriesChartType),
                    chartType), chartType.ToString());

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            // Call Get ChartData() method when the user select a different chart type
            this.Chart1.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(
                typeof(SeriesChartType), DropDownList1.SelectedValue);
} chart tutorial

1 comment:

  1. Hello Sir,
    I want to add Tooltip for series1.
    How can i add?
    here is the code
    Series series1 = Chart1.Series["Series1"];


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.