We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind Chart with data from SQL Database

Platform: ASP.NET Web Forms |
Control: Chart |
Published Date: April 27, 2017 |
Last Revised Date: July 1, 2019

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 database
    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

Chart bounded to data from SQL Database

Sample link: SQLDataBinding

 

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon