windowsforms-2456-controls-and-libraries-chart-control-getting-started-lesson-3-bind-chart-series-to-data.md
This tutorial demonstrates how to bind a chart to an external SQL data source in the Data Source Configuration Wizard, add a series to the chart, and adjust data bindings of the series.
Note
Refer to the following article for more information on how to connect a chart to different data source types: Data Source Wizard.
Follow the steps below to bind the chart to data and specify its series:
Run Microsoft Visual Studio.
Create a new Windows Forms Application or open an existing one.
From the DX.25.2: Data & Analytics toolbox tab, drop the ChartControl onto the form.
To define a data source for the chart, click its smart tag, and select Data Source Wizard.
On the Wizard’s first page, select SQL Data Connection and click New Data Source… in the Data Sources window.
On this page, click No to create a new data connection.
Select the data provider and specify connection parameters. In the Database field, specify the following path to the Northwind database file:
Click Next on the following page to save the created connection string to the configuration file.
On this page, you can construct an SQL query to obtain data from the database, specify a custom query, or select a stored procedure.
Double-click or drag the Products table from the Tables pane onto the Diagram pane. Use the checkbox to include CategoryID, UnitPrice and ProductName fields in the resulting query.
As a result, Visual Studio generates a set of classes for data management within the project.
The sqlDataSource1 object’s fill method is automatically generated to load data from the data base.
The chart is bound to data. If you need to update connection parameters, open the sqlDataSource1 component’s smart tag menu:
The next steps specify which data fields should be used to supply data for a chart series.
Add series to the chart. Click the chart’s smart tag and choose the Series… link in the invoked action list.
In the invoked Series Collection Editor , click Add… , and select the Bar view.
Switch to the Properties tab of the editor’s window and do the following:
Filter data in the series. To do this, click the SeriesBase.FilterCriteria property’s ellipsis button.
Adjust the following options:
You can color each Bar individually in the created series. To achieve this, select the series and in the Properties grid, expand its SeriesBase.View property. Locate and enable the SeriesViewColorEachSupportBase.ColorEach property among the set of the view type-specific options.
Then, invoke the pattern editor for the SeriesBase.LegendTextPattern property of the series. Set the property value to {A}: {V} to show both arguments and values in legend rows.
Each data point is a separate item on the chart’s legend. The item displays a pair of point arguments and their values. To better position the legend, select it first. Then, set the LegendBase.Direction to LeftToRight , LegendBase.AlignmentHorizontal to Center , and LegendBase.AlignmentVertical to BottomOutside in the Properties grid.
To create the chart’s title, click the ellipsis button for the ChartControl.Titles property in the chart’s Properties grid. Then, click Add in the invoked editor to generate a new title. Specify the Title.Text property value (“Product Prices Comparison” in this example) and other options.
To show the series labels, enable the SeriesBase.LabelsVisibility property.
Crosshair cursor labels and a crosshair argument line are displayed on the chart. You can use the ChartControl.CrosshairEnabled property to disable or enable a crosshair cursor at the chart’s level, and the SeriesBase.CrosshairEnabled property to do the same at the series level.
To show crosshair cursor value lines and crosshair cursor axis labels, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowValueLabels, and CrosshairOptions.ShowArgumentLabels properties to true.
Run the application to see the result:
How to: Bind Individual Chart Series to Data at Run TimeThis tutorial explains how to bind each chart series to an individual data source in code.How to: Bind Individual Chart Series to Data at Design TimeThis tutorial explains how to bind each chart series to an individual data source at design time.How to: Specify Series Data MembersThis tutorial describes how to specify a data source for a created series, and automatically populate series points based on the data source table. See Also