How to bind .NET WebForms Chart with data from SQL Database?

ASP.NET MVC Chart can bind with DataTable, List and any implementation of IList, IEnumerable, etc. We can use DataTable to connect and retrieve the data from SQL Database and then bind the DataTable with chart.

The following code snippet illustrates retrieving data from database

DataTable table = new DataTable();     SqlDataAdapter adapter = new SqlDataAdapter();
//Create a connection to SQL DataBase
SqlConnection con = new SqlConnection(connectionString);
con.Open();
//Select all the records in database
string command = "select * from simple_Data";
SqlCommand cmd = new SqlCommand(command, con);
adapter.SelectCommand = cmd;
  
//Retrieve the records from databas     adapter.Fill(table);
 

After retrieving the data from database, we can bind it with chart using the DataSource property and DataBind method of Chart. A field in data table that corresponds to the X values (values along x-axis) of chart should be mapped with the property XName of the series. Similarly, field corresponding to the Y values should be mapped with the YName property of series.

For the OHLC type series, you have to map four fields High, Low, Open and Close to bind the data source and for the bubble series you have to map the Size field along with the XName and YName properties.

The following code snippet illustrates binding the retrieved data with Chart

  
//Set DataTable as data source to Chart
this.Chart1.DataSource = table;
  
//Mapping a field with x-value of chart
this.Chart1.Series[0].XName = "xName";
  
//Mapping a field with y-value of Chart
this.Chart1.Series[0].YName = "yName";
  
//Bind the DataTable with Chart
this.Chart1.DataBind();
 

The following screenshot displays a simple chart bounded to data from SQL Database

Sample link: SQLDataBinding

Note:

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy. The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!