To create a data table and bind the C1BubbleChart to it, complete the following steps:

1. Add a reference C1.Web.ASP.Net Controls.Design.3.dll to your project.
2. 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.
3. Add the C1BubbleChart from the toolbox to your page. For more information on adding the C1BubbleChart icon to your Toolbox, see Getting Started with ASP.NET Web Forms Edition.
4. Right-click the window and select View Code to switch to Code View and add the following code:

   To write code in Visual Basic

   Visual Basic	Copy Code
   Imports System.Data.OleDb

   To write code in C#

   C#	Copy Code
   using System.Data; using System.Data.OleDb; using C1.Web.ASP.Net Controls.C1Chart;

5. Create a data table using the C1Nwind database using the following code:

   To write code in Visual Basic

   Visual Basic	Copy Code
   string Conn = @"provider=Microsoft.Jet.Oledb.4.0; Data Source=|DataDirectory|\\C1NWind.mdb"; OleDbConnection connection1 = new OleDbConnection(Conn); string sql = "SELECT TOP 5 * FROM Products;"; OleDbDataAdapter adapter1 = new OleDbDataAdapter(sql, connection1); DataTable dt = new DataTable(); adapter1.Fill(dt);

   To write code in C#

   C#	Copy Code
   Dim Conn As String = "provider=Microsoft.Jet.Oledb.4.0; Data Source=|DataDirectory|\\C1NWind.mdb" Dim connection1 As New OleDbConnection(Conn) Dim sql As String = "SELECT TOP 5 * FROM Products;" Dim adapter1 As New OleDbDataAdapter(sql, connection1) Dim dt As New DataTable() adapter1.Fill(dt)

6. Add the following code to assign the data table as the C1BubbleChart's datasource:

   To write code in Visual Basic

   Visual Basic	Copy Code
   C1BubbleChart1.DataSource = dt

   To write code in C#

   C#	Copy Code
   C1BubbleChart1.DataSource = dt;

7. Use C1BubbleChartBinding object to populate the chart elements, like  the series, dimension and the legend of the chart, like following:

   To write code in Visual Basic

   Visual Basic	Copy Code
   Dim cb As New C1.Web.ASP.Net Controls.C1Chart.C1BubbleChartBinding() cb.XField = "ProductID" cb.XFieldType = C1.Web.ASP.Net Controls.C1Chart.ChartDataXFieldType.[String] cb.YField = "UnitsInStock" cb.YFieldType = C1.Web.ASP.Net Controls.C1Chart.ChartDataYFieldType.Number cb.Y1Field = "CategoryID" C1BarChart1.DataBindings.Add(cb) C1BarChart1.DataBind()

   To write code in C#

   C#

   Copy Code

   C1.Web.ASP.Net Controls.C1Chart.C1BubbleChartBinding cb = new C1.Web.ASP.Net Controls.C1Chart.C1BubbleChartBinding(); cb.XField = "ProductID"; cb.XFieldType = C1.Web.ASP.Net Controls.C1Chart.ChartDataXFieldType.String; cb.YField = "UnitsInStock"; cb.YFieldType = C1.Web.ASP.Net Controls.C1Chart.ChartDataYFieldType.Number; cb.Y1Field = "CategoryID"; C1BubbleChart1.DataBindings.Add(cb); C1BubbleChart1.DataBind();

 This topic illustrates the following:

The following image shows the C1BubbleChart bound to a data table: