ComponentOne BubbleChart for ASP.NET Web Forms
In This Topic
    Binding the BubbleChart to a DataTable
    In This Topic

    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: