How to bind .NET MVC 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);
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 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();
Copy
The following screenshot displays a simple 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 DatabaseYou 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
