To bind the C1BarChart to an access data source using the DataSourceID, C1ChartBinding.XField, C1ChartBinding.XFieldType, C1ChartBinding.YField, and C1ChartBinding.YfieldType properties, complete the following:

1. Add a reference to the C1.Web.Wijmo.Controls.Design.3.dll to your project.
2. Add the C1BarChart from the toolbox to your page. For more information on adding the C1BarChart icon to your Toolbox, see Getting Started with ASP.NET Web Forms Edition.
3. Add the C1NWind.mdb file to the App_Data folder within your project.
   Note: The C1Nwind.mdb file can be found in Documents\ComponentOne Samples\Common.

4. Click on the Source tab and enter the following in your source file after the ending <:/cc1:C1BarChart> tag:

   To write code in Source View

   <asp:AccessDataSource ID="AccessDataSource1" runat="server"
                 DataFile="~/App_Data/C1NWind.mdb"
                 SelectCommand="select CategoryName, sum(ProductSales) as Sales from (SELECT DISTINCTROW Categories.CategoryName as CategoryName, Products.ProductName, Sum([Order Details Extended].ExtendedPrice) AS ProductSales
   FROM Categories INNER JOIN (Products INNER JOIN (Orders INNER JOIN [Order Details Extended] ON Orders.OrderID = [Order Details Extended].OrderID) ON Products.ProductID = [Order Details Extended].ProductID) ON Categories.CategoryID = Products.CategoryID
   WHERE (((Orders.OrderDate) Between #1/1/95# And #12/31/95#))
   GROUP BY Categories.CategoryID, Categories.CategoryName, Products.ProductName
   ORDER BY Products.ProductName) group by CategoryName;">
   </asp:AccessDataSource>
   

5. Set the DataSourceID property to AccessDatSource1, Height to 475, and Width to 756 like following:

   To write code in Source View

   <cc1:C1BarChart ID="C1BarChart1" runat="server" DataSourceID="AccessDataSource1" Height="475" Width = "756">
   

6. Set the BarChart Header Text property like the following:

   To write code in Source View

   <Header Text="Sales"></Header>
   

7. Define the DataBindings for the C1ChartBinding.XField, C1ChartBinding.XFieldType, C1ChartBinding.YField, and C1ChartBinding.YFieldType before the <:/cc1:C1BarChart> like the following:

   To write code in Source View

   <DataBindings>
          <cc1:C1ChartBinding XField="CategoryName" XFieldType="String" YField="Sales" YFieldType="Number" />
   </DataBindings>
   

This topic illustrates the following:

The following image shows the C1BarChart bound to an external database: