Tutorial: Data Binding a Chart to a Database

  • Article

This tutorial demonstrates how to bind data from a database, as well as how to use tooltips and adjust the axis labels in your chart.

To complete this tutorial, you must have installed the AdventureWorks2008 sample OLTP database installed in an instance of SQL Server (such as SQL Server 2008 Express). To install the sample database, go to www.codeplex.com.

Binding data from a Database

You first bind data from a data source control to the Chart control, then bind specific columns from the data source to the X value and Y values of a series.

To bind data from a database to a chart

  1. In the design surface of your Windows Forms or web application, drag and drop the Chart control from the Toolbox:

  2. In the Properties window of the Chart control, in the Data category, click the DataSourceID (ASP.NET) or DataSource (Windows Forms) property, then click the drop-down arrow, and then select <New data source…>.

  3. In the Choose a Data Source Type page, select Database, and then click Next.

  4. In the Choose your Data Connection page, click New Connection.

  5. In the Add Connection dialog box, make sure that the Data source field is set to Microsoft SQL Server (SqlClient), and then provide the server name and the database name of the AdventureWorks2008 database.

  6. Click Test Connection, then click OK.

  7. Click Next twice.

  8. In the Configure the Select Statement page, select Specify a custom SQL statement, and then click Next.

  9. Copy and paste the following query into the SQL statement field, and then click Next.

    select LastName, SalesYTD, SalesLastYear 
  from HumanResources.Employee as e
  inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID
  inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID

  10. Click Test Query, and then click Finish.

    A SQL data source is now bound to the Chart control with the data columns specified in the query.

To bind data to the X and Y values in the chart

  1. Open the Series Collection Editor for the Chart control.

  2. In the Properties window for the default series, in the Data Source category, click the XValueMember property, then click the drop-down arrow, and then select LastName.

    The XValueMember drop-down list displays all the columns returned by the data source that is bound to the Chart control.

  3. Click the YValueMembers property, then click the drop-down arrow, and then select SalesYTD.

    The X value of the default series is now bound to the LastName column, and the first Y value of the default series is now bound to the SalesYTD column.

  4. In the Series Collection Editor, click Add, and then do the same to the new series with the following values:

    Property

    Value

    XValueMember

    LastName

    YValueMembers

    SalesLastYear

  5. Click OK.

  6. Run the application.

    You can now see two series that display data points that are automatically populated from the data source. You may also notice that the chart does not display all the employees; this is because the Chart control automatically adjusts the labels for readability.

Adjusting Axis Labels and Titles

You use the Axes collection property in the ChartArea Collection Editor to customize labels and titles of the chart area axes.

To adjust the axis labels and add titles

  1. Open the ChartArea Collection Editor for the Chart control.

  2. In the Properties window for the default chart area, in the Axes category, click the Axes collection property, and then click the ellipsis button (…). This opens the Axis Collection Editor.

    The Axes collection (an Axis array) contains the axes of the chart area.

  3. In the Properties window for the (primary) X axis, in the Labels category, expand the LabelStyle property, then set its Interval property to 1, and then verify that the IntervalStyle property is not set.

    This causes the Chart control to show the label for every data point that is displayed.

  4. In the Title category, set the Title property to "Employee".

  5. In the Properties window for the (primary) Y axis, in the Title category, set the Title property to "Sales".

  6. Click OK twice.

  7. Run the application.

    The Chart control now displays every employee on the primary X axis by automatically arranging them at a 90-degree angle.

Adding Tooltips to the Series

Now you will add tooltips to the two series to distinguish between the data points.

To add tooltips to the series

  1. Open the Series Collection Editor again for the Chart control.

  2. Select the first series.

  3. In the Properties window for the first series, in the Map Area category, set the Tooltip property to "#VALX: #VAL sales this year.".

    Notice that if you click the ellipsis button in the Tooltip property's value field, the String Keyword Editor opens. This dialog box helps you build a tooltip string with keywords.

  4. In the Properties window for the first series, in the Map Area category, set the Tooltip property to "#VALX: #VAL sales last year.".

  5. Click OK.

  6. Run the application, and then hold the cursor on top of each data point to see its tooltip.

Next Step

You have now learned how to bind data from a database, as well as how to use tooltips and adjust the axis labels in your chart. To learn how to use events to customize your chart, see Tutorial: Customizing a Chart with Events.

See Also

Reference

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

Concepts

Binding Data to Series

Other Resources

Getting Started