Articles in this section
Category / Section

Binding ASP.NET MVC Chart with data from SQL Database.

3 mins read

ASP.NET MVC Chart can bind with DataTableList and any implementation of IListIEnumerable, 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);
 

 

Copy

 

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 HighLowOpen 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();
 

 

Copy

 

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

Chart bounded to data from SQL Database

Sample link: SQLDataBinding

Conclusion

I hope you enjoyed learning about how to bind .NET MVC Chart with data from SQL Database.

You can refer to our ASP.NET MVC Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Chart example to understand how to create and manipulate data.

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied