Binding FlexChart Directly to the Data Source

Since there is a layer between the data source and the actual chart, the data often needs to be summarized before it can be plotted; however, the data to be plotted sometimes may already be available in a data view or another data source object. And therefore, you can bind the chart directly to the data source object in such cases.

To bind the FlexChart control directly to the data source, you first need to set the DataSource property to the data source object, for instance, the data view, data table, or binding source. Next, you need to bind individual series of the chart to the fields present in the data source object by using the BindingX and the Binding property.

Let's use a case study of a food chain restaurant that specializes in a variety of foods and beverages. They hold special deals/discounts for their regular customers twice a month. Recently, they've decided to give out discounts on every food item purchased if the customer has bought at least five food items. However, the discounts to be given are decided on the basis of the quantities of the items purchased.

A customer, which is basically an organization by the name of QUICK-Stop, has ordered a couple of items in considerable quantities. The customer is billed the requisite amount on the order (order id: 10273) and is provided with the computer generated invoice that comprises the following details:

Product	Unit Price ($)	Quantity	Discount (%)
Chang	15.20	25	20
Queso Cabrales	16.80	50	20
Nord-Ost Matjeshering	20.70	35	20
Escargots de Bourgogne	10.60	30	20

Let us now visualize the invoice data by using FlexChart and interpret the data appropriately for all the products.

Here, we are using the Order Details data table in the C1NWind.mdb database.

Use the below-mentioned code to implement the case study:

Visual Basic
C#

Visual Basic

' retrieve data from the data source
Dim conPath As String = "Provider=Microsoft.Jet.OLEDB.4.0;" & vbCr & vbLf &
                        "Data Source=C:\\Users\\Windows 8.1\\Desktop\\C1NWind.mdb"
Dim conQuery As String = "SELECT * FROM [Order Details] WHERE OrderID = 10327"
Dim da As New OleDbDataAdapter(conQuery, conPath)

' fill the dataset
da.Fill(ds)

' bind the binding source to the dataset
bs.DataSource = ds.Tables(0)

' bind the chart to the binding source
FlexChart1.DataSource = bs

' clear the series collection
FlexChart1.Series.Clear()

' create new series
Dim series1 As New C1.Win.Chart.Series()
Dim series2 As New C1.Win.Chart.Series()
Dim series3 As New C1.Win.Chart.Series()

' add the created series to the series collection
FlexChart1.Series.Add(series1)
FlexChart1.Series.Add(series2)
FlexChart1.Series.Add(series3)

' name the series
series1.Name = "Unit Price"
series2.Name = "Quantity"
series3.Name = "Discount"

' bind X-axis
FlexChart1.BindingX = "Product"

' bind Y axes
series1.Binding = "UnitPrice"
series2.Binding = "Quantity"
series3.Binding = "Discount"

' set the chart type
FlexChart1.ChartType = C1.Chart.ChartType.Scatter

// retrieve data from the data source
string conPath = @"Provider=Microsoft.Jet.OLEDB.4.0;
                Data Source=C:\\Users\\Windows 8.1\\Desktop\\C1NWind.mdb";
string conQuery = "SELECT * FROM [Order Details] WHERE OrderID = 10327";
OleDbDataAdapter da = new OleDbDataAdapter(conQuery, conPath);

// fill the dataset
da.Fill(ds);

// bind the binding source to the dataset
bs.DataSource = ds.Tables[0];

// bind the chart to the binding source
flexChart1.DataSource = bs;

// clear the series collection
flexChart1.Series.Clear();

// create new series
C1.Win.Chart.Series series1 = new C1.Win.Chart.Series();
C1.Win.Chart.Series series2 = new C1.Win.Chart.Series();
C1.Win.Chart.Series series3 = new C1.Win.Chart.Series();

// add the created series to the series collection
flexChart1.Series.Add(series1);
flexChart1.Series.Add(series2);
flexChart1.Series.Add(series3);

// name the series
series1.Name = "Unit Price";
series2.Name = "Quantity";
series3.Name = "Discount";

// bind X-axis
flexChart1.BindingX = "Product";

// bind Y axes
series1.Binding = "UnitPrice";
series2.Binding = "Quantity";
series3.Binding = "Discount";

// set the chart type
flexChart1.ChartType = C1.Chart.ChartType.Scatter;

Following is the output: