Chart Control for WinForms In this video, you’ll see how to create
a chart control in a Winforms application, bind it to a datasource, customize the chart’s
main elements and change its appearance and interaction settings.
Let’s start with a new Winforms application, created with the DevExpress Template Gallery.
To add a chart control, locate the ChartControl item in the DX.13.1: Data & Analytics toolbox
tab and drop it onto a form. Click the Chart control's smart tag to invoke
the ChartControl Tasks. In the tasks list, click the Dock in Parent Container link. This
allows the Chart control to occupy all of the available space on the form.
Now, Let’s add a datasource. To do this, in the invoked ChartControl Tasks,
open the drop-down list for the Choose Data Source type and click the Add Project Data
Source link. The Data Source Configuration Wizard will
appear. Select the Database icon and click Next. In the Choose a Database Model page, click
Next. On the Choose Your Data Connection page,
click the New Connection button. Specify (local) for the Server name.
Next, click the Select or enter a database name combo box and select nwind.
Click OK to close the Add Connection window and, then, Next to switch to the next wizard
page. Configure the Choose Your Database Objects
page, expand the Products table from the database, choose ProductName, CategoryID, UnitsInStock
and UnitsOnOrder fields. To complete the data source creation, click
Finish. Now, the productsBindingSource object is
assigned to the chartControl. Next, let’s Run the chart wizard. To do
this, use the ChartControl's smart tag by clicking the Run Wizard... link.
Let’s change the default series names. Switch to the Series wizard page and Specify
the first series name as Units In Stock and the second series name as Units On Order.
Next, switch to the Data page and select the Series Binding tab.
For the first series, set the Argument combo box to ProductName; and the Value combo-box
to UnitsInStock. For the second series, set the Argument combo
box to ProductName; and the Value combo box to UnitsOnOrder.
To limit the number of data points in each series, choose the first series and click
the Data filters ellipsis button in the Data wizard page.
In the invoked Data Filter Collection Editor, click Add and, then, set DataFilter.ColumnName
to CategoryID and DataFilter.Value to 4. Leave the DataFilter.Condition property set
to its default value (Equal) and click the Close button.
Then, repeat these actions for the second series.
And Click Finish to close the wizard. To see how the resulting chart will finally
look at design time, click the Populate link in the ChartControl Tasks list. This will
redraw the chart using the obtained data. Ok, now let’s RUN THE APPLICATION TO SEE
THE RESULTS Next, Let’s change the series view type.
To do this, click the Run Wizard... link in the ChartControl's smart tag at design time.
Switch to the Series Page and change the series view type to Area for the Units In Stock series.
Next, we will customize the legend position on a diagram.
Switch to the Legend page, set the Direction combo box to LeftToRight. In the Alignment
group set vertical alignment to BottomOutside and horizontal alignment to Center.
Next, click Finish to close the wizard. You can customize the chart appearance and
behavior changing the corresponding properties in the Properties grid.
Switch to the Properties tab. As you can see, the main chart properties
can be grouped into three categories. Appearance – this category is used to determine the
overall look and feel of a chart. Let’s change the charts default appearance.
To do this, set the AppearanceName property to Pastel Kit.
Behavior – contains properties that allow you to control the chart’s interaction tools
(tooltips and crosshair cursor) and change the common chart behavior.
In this section, we are going to change the crosshair cursor behavior.
Let’s show the crosshair value line. To do this, locate Crosshair Options and set
the ShowValueLine property to True. You can add or delete chart elements (for
example diagram, series, annotation, legend) and modify their properties.
You can see the crosshair cursor with value lines that provides the convenient way to
compare series. Finally, we will demonstrate how to change
a view type for multiple series. Run the Wizard.
In the Chart Type page select Radar and Polar Series from the drop-down list.
Next, click Radar Line. And The chart type has been changed automatically.
Switch to the Chart Titles page. To create a title for your chart, click the
Add button on the right pane. Specify the Products text in the Text tab.
You can see this title on the left pane of this wizard page.
Close the chart wizard by clicking the Finish button.
And finally, let’s RUN THE APPLICATION to SEE THE RESULT
As you can see, tooltips appear each time the mouse cursor hovers over a series point.
Note that the Radar series doesn’t support a crosshair cursor. So, tooltips are showing
automatically instead. And that’s it. Thanks for watching and thank
you for choosing DevExpress.