Edit this page

Quick Start: Create a Data Bound Chart

This Quick Start tutorial is designed to have you quickly up and running with a working data bound RadChart. In the tutorial you will populate the chart by binding to a data source and will modify several properties that affect chart appearance.

Create a Windows Application

  1. From the Visual Studio File menu select New | Project.

  2. Select the "Windows Application" and enter a location path for the project.
    chart-getting-started-quick-start 001

  3. From the Toolbox drag a RadChart component to the form. The project should now look like the figure below.
    chart-getting-started-quick-start 002

Configuring the Data Source

  1. From the RadChart Smart Tag menu select the Data Choose Data Source drop down and click the Add Project Data Source item.
    chart-getting-started-quick-start-create-a-data-bound-chart 003

  2. On the Choose a Data Source Type page of the Data Source Configuration Wizard select Database and click the Next button.chart-getting-started-quick-start-create-a-data-bound-chart 004

  3. On the Choose Your Data Connection page click the New Connection button. This will display the Add Connection. Enter "(local)\SQLEXPRESS" in the Server name drop down list. Select "AdventureWorksT" from the Select or enter a database name drop down list. Optionally, you can click the Test Connection button to verify your settings so far. Click the OK button to close the dialog.
    chart-getting-started-quick-start-create-a-data-bound-chart 005

  4. On the Choose Your Data Connection page of the wizard click the Next button.
    chart-getting-started-quick-start-create-a-data-bound-chart 006

  5. On the Choose Your Database Objects page of the wizard locate the ProductInventory table and select the Quantity field. Click the Finish button. Note: In following steps this information will be overwritten and is just a place holder.
    chart-getting-started-quick-start-create-a-data-bound-chart 007

  6. Three new components will appear in the component tray below the form designer: adventureWorksTDataSet, productInventoryBindingSource and productInventoryTableAdapter. Right click the table adapter and select Edit Queries in DataSet Designer.
    chart-getting-started-quick-start-create-a-data-bound-chart 008

  7. In the DataSet Designer right click the ProductInventoryTableAdapter and select Configure.
    chart-getting-started-quick-start-create-a-data-bound-chart 009

  8. Enter the following SQL into the edit space provided in the Enter a SQL Statement page of the TableAdapter Configuration Wizard.

  9. Click the Finish button.
    chart-getting-started-quick-start-create-a-data-bound-chart 010

Format the Chart Using the SmartTag

  1. From the Smart Tag select the RadChart Wizard. Select the Type tab and click the Horizontal Orientation radio button.
    chart-getting-started-quick-start-create-a-data-bound-chart 011

  2. On the RadChart Wizard Data tab Axis Labels choose the "SubCategory" from the X-Axis drop down.
    chart-getting-started-quick-start-create-a-data-bound-chart 012

  3. On the RadChart Wizard Skin tab select the "Deep Blue" skin.
    chart-getting-started-quick-start-create-a-data-bound-chart 013

  4. On the RadChart Wizard Labels, Legend and Title set the Legend Alignment to "Right" and Title Text to "Products".
    chart-getting-started-quick-start-create-a-data-bound-chart 014

  5. The X-Axis labels bound to the "SubCategory" column are too wide and will overflow. To make the plot area smaller to make room, set the PlotArea.Appearance.Dimensions.Margins.Left to "50%".
    chart-getting-started-quick-start-create-a-data-bound-chart 015

  6. The finished chart should look like the screenshot below.
    chart-getting-started-quick-start-create-a-data-bound-chart 016