Data Binding a Chart to a Database In Microsoft Visual Studio 2010

Category: ASP.NET

In this tutorial you will create a chart that pulls in and changes based on database content. To start you will first need to download this database. After we get the database imported you will bind data to the chart control, and then you will be able to it to populate the X and Y values of a series.

Creating the Chart and Importing the Database

Download Source

  1. First right-click on App_Data and select Add Existing Item… Then browse to where you saved the ChartDB.mdf file you just downloaded.
  2. In design view drag a chart to your empty page. In the top right corner of the chart window there is a small arrow click It. This window will sometimes open up by default; this is the Chart Tasks window.

 


I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.

  1. Under Choose Data Source in the Chart Tasks window, use the drop down menu and select . Select Database and hit next.
  2. In the drop down menu to the left of New Connection, select ChartDB.mdf as the database. Hit Next two times and accept the default settings. The Sales table should be selected, hit Next. Test the Query to make sure everything works and click Finish.
  3. Inside the Chart Tasks window you will see two drop down menus. X Value Member and Y Value Members, select SalesPeople as the X Value and SalesLastYear as the Y Value. There you have it! You are pulling data like the best of them!

Adding Titles, Axis Labels, and a Tooltip

  1. In the ChartArea Collection Editor there is an Axes category. Select the Axes collection property and click the ellipsis button.

Note: The Axes collection contains the axes of the chart area.

  1. In the Axis Collection Editor select the Axis named X Axis. Under the Labels category expand the LabelStyle property. Once you have done this set the Interval value to 1. This will make sure that the label is seen for every data point that is displayed on the chart.
  2. Now move to the Title property under the Title Category and set it to “Employee”.
  3. Now select the Y Axis and set its Title to “Sales”. Click ok twice. Run the application to see your new axis labels in action!
  4. Next we will navigate to the Series Collection Editor for the Chart Control. Select Series1 and go down to the Map Area category and change the Tooltip value to the following: #VALX: #VALsales this year.

Note: If you click the ellipsis icon in the Tooltip area the String Keyword Editor Opens and can help you develop a tooltip string.

  1. Click ok. Run the application once more and hover over the chart elements depicting how many sales were made and you will see a tooltip going into more detail about them.

Success!

Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.

You have learned how to successfully use a database to populate your chart by binding data from a database to your chart. Now you can use charts to their full potential as the dynamically change to your content!